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内 容 提 要 


JavaScript 语言 是 一 种 具有 高 度 表 达能 力 的 、 基 于 原型 特性 的 、 非 常 灵活 的 面向 对 象 程 

序 设计 语言 。 本 书 着 重 于 介绍 JavaScript 在 面向 对 象 方面 的 特性 ， 以 为 您 展示 如 何 去 构 建 
强健 的 、 可 维护 的 、 功 能 强大 的 应 用 程序 及 程序 库 。 
本 书 是 《JavaScript 面向 对 象 编程 指南 》 的 第 2 版 ， 全 书包 括 8 章 和 4 个 附录 。 依 次 介 
了 JavaScript 的 发 展 历史 、 基 础 性 话题 〈 变 量 、 数 据 类 型 、 数 组 、 循 环 以 及 条 件 表达 式 )、 
函数 、 对 象 、 原 型 、 继 承 的 实现 、BOM 和 DOM 等 。 附 录 部 分 包括 了 学 习 JavaScript 编程 
常用 的 参考 资源 。 尤 其 值得 一 提 的 是 ， 本 书 作者 是 JavaScript 设计 模式 方面 的 专家 ， 他 在 
本 书 第 8 章 中 介绍 了 几 种 常用 的 JavaScript 编程 模式 ， 这 也 成 为 他 的 另 一 本 重要 著作 
《JavaScript 模式 》(JavaScript Patterns) 葛 定 了 基础 。 
本 书 全 面 地 覆盖 了 JavaScript 语言 的 00 特性 ， 同 时 兼顾 基础 知识 ， 对 初学 者 来 说 ,是 
难得 的 JavaScript 佳作 。 读 者 不 需要 具备 任何 的 JavaScript 基础 知识 及 项 目 经验 ， 通 过 学 习 
这 本 书 ， 将 会 在 面试 有 关 JavaScript 程序 设计 的 职位 时 游 力 有 余 。 


AAS 


译 者 序 


凌 杰 把 这 一 版 译 者 序 的 工作 交 给 了 我 , 这 让 我 苦恼 了 一 阵子 。 我 个 人 是 从 来 不 看 序 的 ， 
技术 类 的 国外 翻译 作品 就 更 不 看 译 者 序 了 。 我 相信 你 们 也 不 会 看 的 ， 那 我 就 乱 写 了 。 


性 


目 


段 时 间 在 网 络 上 看 了 车 洪 才 老 先生 编写 《阿富汗 语词 典 》 的 故事 。36 年 ，200 万 字 ， 


完稿 时 已 斗 转 星 移 。 我 记得 我 阅读 的 时 候 在 往 西藏 南路 地 铁 站 走 ， 看 着 看 着 便 情 不 自 己 ， 
然后 在 马路 边 大 哭 。 


觉得 翻译 书 是 一 件 非常 条 寞 的 工作 。 它 需要 强大 的 精神 力 去 自 始 而 终 地 执行 ， 这 种 


精神 力 的 重要 性 甚至 要 高 于 对 专业 水 平 以 及 英语 水 平 的 要 求 。 这 本 译作 的 诞生 是 对 我 意志 


的 磨 练 ， 我 相信 我 今后 也 不 会 忘记 这 近 百 个 日 夜 ， 我 是 如 何 阅读 、 翻 泽 、 核 对 ， 再 阅读 、 


翻译 、 核 对 ， 反 反复 复 ， 直 到 终结 的 这 一 天 ， 悦 车 隔世 。 
然而 ， 书 的 修成 不 都 如 此 吗 ? 前 有 明 朝 的 《永乐 大 典 》 近 有 车 洪 才 老 先生 的 《阿富汗 
语词 典 》。 我 还 看 过 


比 ， 这 本 小 小 的 


部 电影 《 编 舟 记 》 讲述 的 是 一 部 字典 历经 十 余年 的 修成 。 跟 他 们 相 


所 花费 的 心血 实在 是 不 值 一 提 。 
对 于 读者 也 是 如 此 的 。 我 从 不 相信 21 天 可 以 学 会 任何 一 项 技术 。 在 这 个 领域 成 为 一 个 


专家 ， 并 没有 比 其 他 领域 困难 或 者 容易 更 多 。 如 同 这 本 书 所 耗费 的 我 的 心力 一 样 ， 计 算 机 
技术 将 在 此 生 折 魔 你 ， 


个 驿站 。 我 只 不 过 先 于 你 到 此 ， 我 只 不 过 是 个 转述 者 ， 如 此 而 已 。 


成 就 你 (或 许 它 已 经 这 么 做 了 )。 而 这 本 书 ， 不 过 是 这 漫漫 长 路 的 一 


我 不 相信 这 本 书 有 字典 一 样 漫长 的 生命 。 十 年 、 甚 至 只 是 五 年 后 ， 计 算 机 技术 的 日 新 月 


异 可 能 会 让 本 
多 么 伤害 本 书 的 所 有 了 
书 。 作 为 本 书 原版 最 认真 的 读者 之 一 ， 我 保证 : 如果 你 是 这 本 书 的 目标 读者 ， 这 本 书 绝 不 会 
白白 浪费 你 所 付出 的 时 间 以 及 金钱 。 我 们 知道 这 本 书 终 有 一 天 会 被 时 代 的 洪流 所 抛弃 ， 但 是 
呈现 给 你 ， 因 为 推动 这 时 代 向 前 的 正 是 未 来 的 你 ， 我 们 乐于 见证 那 一 刻 的 
FE 前 的 IE6 对 自己 终 将 被 淘汰 的 命运 毫 不 苦 惧 ， 此 刻 的 本 书 也 是 一 样 。 

首先 感谢 原版 的 两 位 作者 ， 没 有 你 们 当然 就 绝 不 会 有 这 本 书 。 感 谢 读 杰 的 努力 ， 让 我 
BB 的 翻译 。 成 书 背后 需要 很 多 人 的 工作 , 感谢 这 本 书 所 有 工作 人 员 的 付出 。 
对 期 间 对 我 的 支持 ， 虽 然 她 并 不 确切 知道 我 在 做 什么 ， 但 时 值 我 失业 ， 我 


仍然 将 这 本 书 如 上 


到 来 一 一 十 各 


有 机 会 参与 这 本 
感谢 母亲 在 我 翻 


上 一文 不 值 ， 非 法 网 站 甚至 不 愿 提 供 本 书 的 盗版 〈 当 然 ， 你 应 该 明白 ， 盗 版 会 


[作者 )。 然 而 我 们 对 此 坦然 以 待 。 如 同 所 有 序言 要 说 的 : 这 是 一 本 好 
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诀 定 趁 此 机 会 做 一 些 想 做 的 事 ， 她 对 此 没有 半分 怨言 。 特 别 感谢 上 海 市 黄浦 区 图 书馆 七 楼 
阅览 室 的 工作 人 员 ， 阅 览 室 良好 的 秩序 全 是 你 们 的 功劳 ， 也 感谢 你 们 没有 把 自 带 笔 记 本 的 
本 书 编 写 中 一 定 有 很 多 错漏 及 翻译 不 妥 之 处 。 我 看 到 了 你 们 对 于 第 一 版 的 一 些 反 馈 ， 
包括 但 不 限于 豆瓣 读书 、 亚 马 进 评论 等 ， 感 谢 你 们 的 意见 和 建议 。 对 于 第 二 版 的 反馈 ， 我 
在 此 留 下 一 个 github 地 址 ， 和 希望 能 够 与 大 家 交流 : http:/github.comy/scaret/oojs。 
祝 你 阅读 愉快 。 


陆 各 淳 


2014-03-09 
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Stoyan Stefanov : Facebook 公司 工程 师 、 作 家 、 演 说 家 。 他 经 常会 在 博客 
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谨 以 此 书 献 给 我 的 妻子 Eva, 及 我 的 女儿 Zlatina 和 Nathale。 感谢 你 们 的 耐心 、 
支持 与 鼓励 。 
也 将 此 书 献 给 我 的 编辑 们 。 你 们 自愿 将 时 间 投 入 本 书 草稿 的 审读 中 。 请 接受 
我 由 训 的 敬意 一 一 非常 感谢 你 们 无 价 的 投入 。 


Kumar Chetan Sharma 原本 一 直 致 力 于 成 为 一 个 电子 工程 师 , 并 梦想 着 打造 一 个 终极 音 
响 系统 。 但 由 于 一 次 偶然 的 机 会 ， 他 得 到 了 一 份 与 HIML 相关 的 兼职 ， 然 后 自然 地 学 习 了 
CSS 和 JavaScript， 从 此 便 一 发 不 可 收拾 。 要 知道 在 那个 年 代 ，JavaScript 基本 上 还 只 能 用 
来 验证 表单 和 制作 一 些 奇特 的 DHTML 效果 ， 且 IE6 还 在 世界 范围 内 独占 鳌头 。 但 就 从 那 
时 起 ,他 就 已 经 在 开发 基于 LAMP 架构 的 Web 应 用 了 。 从 白色 标签 的 社交 网 络 应 用 ， 到 为 
电信 运营 商 制作 的 Web 控制 面板 ， 再 到 联网 的 电子 充电 设备 ， 都 有 他 开发 的 身影 。 目 前 他 
在 Yahoo! 公 司 的 搜索 部 门 从 事前 端 工程 师 的 工作 。 


审阅 者 简介 


Alex R. Young: 工程 学 硕士 ， 拥 有 超过 10 年 的 Web 与 移动 行业 经 验 。 


他 还 是 DailyJS 网 站 的 首席 专栏 作家 ， 定 期 以 JavaScript 为 主题 撰写 文章 。 


知名 跨国 


公司 工作 ， 其 5 


也 曾 在 多 家 


Pp 包括 Thomson Reuters。 目 前 他 在 写 一 本 Node 方面 的 


甩 。 


本 书 是 《JavaScript 面向 对 象 编程 指南 》 的 第 二 版 。 前 一 版 由 Stoyan Stefanov 车 (Packet 
出 版 社 发 行 ), 在 业界 广 受 好 评 。 然 而 , 自 第 一 版 发 行 至 今 已 过 了 五 个 年 头 。 期间, JavaScript 
由 一 项 主要 适用 于 浏览 器 客户 端的 计算 机 技术 , 逐渐 发 展 成 为 一 种 多 功能 的 程序 设计 语言 ， 
其 至 连 服务 端 也 能 由 它 来 编写 。 所 以 在 这 一 版 中 , 我 们 继续 带领 大 家 学 习 JavaScript 的 “ 语 
言 部 分 ” 即 其 重心 依然 会 放 在 JavaScript 语言 本 身 〈 独 立 于 运行 环境 部 分 )， 着 重 讨论 
ECMAScript、JavaScript 面向 对 象 编程 、 模 式 ， 原 型 继承 以 及 设计 模式 。 

本 书 不 会 对 读者 的 JavaScript 基础 知识 及 项 目 经 验 做 任何 假设 。 您 完全 可 以 从 零 开始 ， 
从 本 书 学 习 这 门 语言 。 同 时 ， 对 JavaScript 有 一 定 基础 的 读者 也 可 以 从 中 学 到 更 多 有 用 的 
知识 。 另 外 ， 我 们 在 每 一 章 的 末尾 都 设 有 习题 ， 以 便 帮 助 读者 了 解 自己 的 学 习 进 度 。 


本 书 所 涵盖 的 内 容 


国 第 1 章 : 面向 对 象 的 JavaScript 简单 阐述 了 ts 现状 及 未 

来 。 另 外 ， 我 们 还 对 面向 对 和 象 程序 设计 中 的 基础 概念 做 了 一 些 介 绍 ， 并 详细 说 明 

了 该 语言 调试 环境 (Firebug) 的 安装 、 设 置 及 应 用 示范 。 

2 章 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表 达 式 讨论 语言 中 的 一 些 基础 性 话题 
包括 变量 、 数 据 类 型 、 数 组 、 循 环 以 及 条 件 表达 式 。 

图 ”第 3 章 : 函数 讨论 的 是 JavaScript 中 函数 的 使 用 方法 。 在 这 一 章 中 ， 我 们 将 系统 
地 学 习 关 于 函数 的 一 切 内 容 。 另 外 ， 我 们 还 会 了 解 变量 作用 域 以 及 内 建 函 数 的 相 
关内 容 。 其 中 有 一 个 叫做 “ 闭 包 ”的 概念 非常 有 趣 ， 但 也 很 不 容易 理解 ， 在 该 章 


国 
SR 
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末尾 ， 我 们 会 重点 介绍 。 


国 第 4 章 ; 对 象 介绍 的 是 JavaScript 中 的 对 象 类 型 。 在 这 一 章 中 ， 我 们 将 学 习 如 何 
使 用 对 象 的 属性 与 方法 , 以 及 创建 对 象 的 各 种 方式 。 另 外 , 我 们 还 会 讨论 JavaScript 
中 的 内 建 对 象 ， 例 如 Array、Function、Boolean、Number、String 等 。 


国 第 5 章 : 原型 介绍 JavaScript 中 有 关 原 型 的 所 有 重要 概念 。 包 括 原型 链 的 工作 方 


式 、hasOwnProperty() 方 法 ， 以 及 JavaScript 中 的 原型 陷阱 等 。 

国 ”第 6 章 : 继承 讨论 如 何在 JavaScript 中 实现 继承 。 该 章 会 探讨 在 JavaScript 中 创建 子 
类 的 一 种 方式 ， 就 像 那些 基于 类 的 面向 对 象 编程 语言 一 样 。 

国 第 7 章 : 浏览 器 环境 介绍 浏览 器 相关 的 内 容 。 在 这 一 章 中 ， 我 们 将 会 了 解 到 有 
关 BOM (Browser Object Model， 浏 览 器 对 象 模型 ) 和 DOM (W3C 的 Document 


Object Model， 文 档 对 象 模型 ) 的 知识 ， 
关 的 内 容 。 


并 进一步 了 解 与 浏览 器 事件 和 AJAX 相 


四 第 8 章 : 编程 模式 与 设计 模式 归纳 性 地 介绍 几 种 专用 于 JavaScript 的 编程 模式 ， 
以 及 若干 个 与 语言 无 关 但 适用 于 JavaScript 的 设计 模式 。 这 些 模式 大 部 分 来 自 《 设 


计 模式 》(GoF) 这 本 书 。 另外， 该 章 也 会 对 JSON 有 所 讨论 。 


国 
于 


国 
于 


范例 。 


录 A: 保留 字 列 出 了 JavaScript 中 的 保留 字 。 
4 录 B: 内 建 函 数 是 一 份 JavaScript 中 内 建 函 数 的 参考 指南 ， 并 附 有 简单 的 使 用 


国 ”附录 C: 内 建 对 象 是 一 份 JavaScript 中 内 建 对 象 类 型 的 参考 指南 ， 它 提供 了 详细 的 


对 象 方法 、 属 性 介绍 和 使 用 示例 。 


加 ”附录 D: 正则 表达 式 是 一 份 正 则 表达 式 模式 的 参考 指南 。 
您 可 以 从 下 面 这 个 链接 获取 参考 答案 的 电子 版 : http://www.packtpub.com/sites/default/files/ 


downloads/31270T_Answers_to_Exercise_Questions.pdf。 


前 期 准备 


企 阅 读本 书 之 前 ， 您 需要 安装 一 个 现代 浏览 器 一 一 推荐 Google Chrome 或 者 Firefox， 并 


可 自由 选择 是 否 安装 Node.js。 虽 然 最 新 版 本 的 Firefox 自 带 了 Web 开 发 者 工具 ， 但 我 们 还 是 
非常 推荐 您 使 用 Firebug 插 件 。 当然, 您 可 以 自行 选择 用 于 编写 JavaScript 代 码 的 文本 编辑 器 。 


适用 对 象 


本 书 适 用 于 任何 希望 学 习 JavaScript 的 编程 初学 者 ， 包 括 那 些 懂 一 点 JavaScript， 却 对 其 
面向 对 象 特性 不 其 了 解 的 读者 。 


一 些 约定 


在 这 本 书 中 ， 读 者 会 发 现 几 种 不 同样 式 的 文本 ， 它 们 各 自 代 表 了 不 同类 型 的 信息 。 下 
面 ， 我 们 将 通过 一 些 文本 实例 来 解释 一 下 这 些 样式 各 自 所 代表 的 含义 。 

对 于 一 段 文 本 中 的 代码 ， 我 们 将 以 如 下 形式 来 表现 :“ 你 可 以 通过 检查 事件 对 象 的 
cancellable 属性 来 确认 ”。 


而 对 于 代码 块 文本 ， 我 们 将 采用 如 下 格式 : 


var a; 
Var thisIsAVariable; 
var and this too; 


var mixl2three; 


N= 


需要 提醒 你 注意 代码 的 输出 时 ， 我 们 会 将 相关 行 或 项 目的 字体 加 粗 ， 例 如 : 


> Var case matters = 'lower'; 
> Var CASE MATTERS = 'upper'; 


> case matters; 


"lower" 


> CASE MATTERS; 
wm upper" 


命令 行 输入 及 输出 会 仿照 如 下 格式 呈现 : 
aliasj sc='/System/Library/Frameworks/JavaScriptCore .framework/Versions/Cu 


rrent/Resources/jsc' 

另外 ， 加 粗 字 体 还 经 常用 于 强调 新 的 术语 或 重要 词汇 。 例 如 ， 我 们 屏幕 上 的 菜单 以 及 
对 话 框 中 会 看 到 的 单词 ， 通 常会 这 样 表述 :“ 在 单 击 Cancel 按钮 后 ，preventDefault() 方 
法 就 会 被 调用 ”。 
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[a CA 这 种 形式 表达 的 是 一 些 需要 读者 警惕 或 需要 重点 关注 | 


的 内 容 。 
~ 
| 总 这 种 形式 所 提供 的 是 一 些 提示 或 小 技巧 。 ] 
读者 反馈 


我 们 始终 欢迎 任何 来 自 读者 的 反馈 信息 。 人 对 于 这 本 书 的 看 法 一 一 
您 喜欢 本 书 的 哪 部 分 ， 或 者 不 喜欢 本 书 的 哪 部 分 。 这 些 反 馈 对 于 我 们 的 选 题 开发 来 说 都 是 
至 关 重要 的 。 
对 于 一 般 的 反馈 ， 您 只 需 简单 地 给 feedback@packtpub.com 发 一 份 电子 邮件 ， 并 在 邮 
件 的 标题 中 注 明 这 本 书 的 书 名 
如 果 您 对 某 一 话题 有 专长 ， 并 且 有 兴趣 撰写 一 本 这 方面 的 书 〈 或 为 某 本 书 作 出 贡献 )， 
青 参 考 我 们 的 作者 指南 : http:/www.packtpub.comyauthors 。 


客户 支持 


et 


很 荣幸 您 成 为 这 本 Packt 图 书 的 主人 ， 我 们 将 会 尽 一 切 努 力 来 帮助 您 获取 最 好 的 图 书 


资讯 。 
勘误 表 


尽管 我 们 已 经 尽 了 最 大 努力 来 确保 书 中 内 容 的 正确 性 ， 但 错误 始终 可 能 存在 。 如 果 您 
在 我 们 的 书 中 发 现 了 错误 无 论 是 关于 文字 的 还 是 代码 的 只 要 您 能 告诉 我 们 ， 我 们 
都 将 不 胜 感激 。 这 样 也 可 以 大 大 减少 其 他 读者 在 阅读 方面 所 遇 到 的 困难 。 当 您 发 现 错误 
对， 只 需要 访问 http:/www.packtpub.com/submit-errata, 选择 相应 的 书 名 , 然后 单 击 “errata 
submission form” 和 链接 并 输入 相关 错误 的 详细 信息 即 可 。 一 旦 您 提供 的 信息 获得 了 确认 ， 
相关 的 内 容 就 会 出 现在 这 本 书 的 勘误 表 中 。 我 们 出 版 社 所 有 现存 的 勘误 表 都 可 以 在 
http://www.packtpub.com/support 中 获取 。 


TT 


版 权 


在 互联 网 上 ， 版 权 对 于 所 有 媒介 一 直 是 一 个 很 大 的 问题 。 在 Packet， 我 们 向 来 对 于 版 
权 许 可 非常 重视 。 如 果 您 在 网 络 上 发 现 我 们 出 版 过 的 作品 ， 无 论 它 是 出 于 什么 形式 ， 都 请 
马上 将 网 址 或 网 站 名 称 告知 我 们 ， 以 便于 我 们 采取 补救 措施 。 
请 将 您 怀疑 有 侵权 行为 的 文档 链接 发 送 到 : copyright@packetpub.com。 您 付出 的 帮助 
是 对 作者 权利 的 保护 ， 我 们 也 由 此 才能 继续 为 您 带 来 有 价值 的 内 容 。 


疑问 
如 果 您 对 本 书 有 任何 疑问 ， 也 可 以 通过 questions@packtpub.com 跟 我 们 联系 ， 我 们 将 
竭尽 所 能 地 蔡 您 解决 。 
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第 1 章 
面向 对 象 的 JavaScript 


自 Web 诞生 以 来 ， 人 们 对 于 动态 与 响应 式 页 面 的 需求 便 与 日 俱 增 。 虽 然 静 
态 的 HTML 文本 页 面 在 可 读 性 方面 或 许 会 更 好 一 些 ， 特 别 是 在 有 了 CSS 的 辅助 
之 后 ， 页 面 排版 显得 更 加 美观 了 ， 但 从 另 一 方面 来 说 ， 如 果 我 们 能 让 人 们 像 在 桌 
面 上 那样 使 用 浏览 器 中 的 应 用 程序 ， 事 情 或 许 会 变 得 更 有 趣 一 些 。 如 今 ， 我 们 已 
能 在 浏览 器 中 直接 使 用 电子 邮件 、 日 历 、 电 子 银行 、 购 物 、 绘 画 、 游 戏 及 文本 编 
辑 。 这 都 要 感谢 一 种 Web 编程 语言 一 一 JavaScript， 是 它 让 这 些 Web 应 用 成 为 了 
可 能 。 然而 ,JavaScript 最 初 也 只 不 过 是 我 们 偶尔 典 入 在 HTML 中 的 一 小 行 代码 ， 
但 如 今 它 已 经 日 趋 成 熟 ， 并 且 被 广泛 使 用 。 开 发 者 们 利用 该 编程 语言 的 面向 对 象 
特性 ， 实 现 了 代码 重用 ， 并 构建 起 了 可 伸缩 的 代码 架构 。 


如 果 我 们 回顾 一 下 Web 开发 领域 这 些 年 来 的 流行 词汇 一 一 DHTML、Ajax、Web 2.0、 
HTMLS5, 就 会 发 现 这 些 词 背后 的 内 涵 始 终 没有 变 , 依然 是 : HTML、CSS、JavaScript。 其 中 HIML 
服务 于 内 容 ，CSS 服务 于 表现 ， 而 JavaScript 则 服务 于 行为 。 换 句 话说 ，JavaScript 是 让 一 切 东 
西 协同 运作 的 粘 合 剂 ， 有 了 它 ， 我 们 才能 在 构建 出 丰富 多 彩 的 Web 应 用 程序 。 
但 事情 远 不 止 如 此 ，JavaScript 的 应 用 领域 并 不 仅仅 局 限于 Web 平台 。 
在 JavaScript 程序 所 能 运行 的 多 种 宿主 环境 中 ，Web 浏览 器 无 疑 是 用 得 最 普遍 的 那 


种 ， 但 JavaScript 也 可 以 运行 于 其 他 环境 。JavaScript 可 以 应 用 于 各 式 各 样 的 小 工具 、 应 用 
扩展 、 以 及 其 他 软件 ， 本 书 在 后 续 章节 中 会 一 一 提 及 。 总 而 言 之 ， 将 时 间 投 资 于 学 习 


JavaScript 是 一 个 明智 的 选择 ， 因 为 一 旦 您 掌握 了 JavaScript， 就 可 以 编写 出 各 种 适用 于 多 


— 
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种 平台 的 不 同 应 用 ， 包 括 手机 应 用 和 服务 器 端 程序 。 毕 竟 ， 如 今 我 们 要 说 JavaScript 无 所 
不 在 ， 那 确实 是 一 点 都 不 夸张 。 


本 书 将 从 零 开始 ， 我 们 不 会 对 读者 的 编程 背景 做 任何 假设 ， 只 需要 您 了 解 一 点 HTML 
常识 即 可 。 而 且 除 了 有 一 个 章节 用 于 探讨 web 浏览 器 环境 以 外 ， 本 书 其 他 部 分 都 在 纯粹 
地 关注 JavaScript 语言 本 身 。 因 此 , 您 可 以 将 在 本 书 中 学 到 的 知识 应 用 于 所 有 的 JavaScript 
环境 。 


下 面 ， 我 们 将 从 以 下 两 点 开始 : 
@ ”对 JavaScript 背后 故事 的 简单 介绍 ; 


@ 面向 对 象 。 


1.1 回顾 历史 


起 初 ，Web 页 面 不 过 是 一 些 以 静态 HTML 文档 形式 发 布 的 科学 出 版 物 ， 这 些 文档 之 间 
只 依靠 一 些 简单 的 超 链接 (hyperlinks) 绑 定 在 一 起 。 这 可 能 有 些 难 以 置信 ， 但 最 早 的 Web 
页 面 的 确 是 不 支持 任何 图 片 的 ， 但 这 种 情况 不 久 便 得 到 了 改善 。 随 后 Web 就 越 来 越 广 受 欢 
迎 ， 规 模 也 在 不 断 增 大 ， 很 快 随 着 Web 业务 的 快速 普及 和 增长 ， 网 站 管理 者 越 来 越 希望 自 
己 所 创建 的 Web 页 面 能 处 理 更 多 的 事情 。 例如， 他 们 希望 网 站 能 具有 更 丰富 的 用 户 交 互 能 
力 ， 主 要 是 能 完成 一 些 简单 任务 〈 如 验证 表单 之 类 )， 以 此 节省 与 服务 器 端的 信息 交互 。 
当时 他 们 可 以 有 两 种 选择 : Java applets 和 LiveScript。 其 中 , LiveScript 是 1995 年 由 Netscape 
公司 的 Brendan Eich 所 开发 的 程序 设计 语言 。Netscape 2.0 发 布 之 后 ， 它 被 正式 更 名 为 
JavaScript。 

众所周知 ，Applets 后 来 没落 了 ，JavaScript 则 更 加 繁荣 。 这 种 通过 在 HTML 中 其 入 简 
短 代 码 段 来 调整 Web 页 面 中 其 他 静态 元 素 的 方式 在 网 站 管理 者 间 大 受 好 评 。 但 没 过 多 久 ， 
j 览 器 的 竞争 厂商 Microsoft 公司 就 发 布 了 支持 JScript 的 Internet Explorer (IE) 3.0。JScript 
简直 就 是 JavaScript 的 翻版 ， 并 且 还 在 其 继承 之 上 引入 了 一 些 下 独 有 的 特性 。 最 终 ， 为 了 
使 语言 的 实现 更 趋向 于 标准 化 ， 于 是 ECMAScript 应 运 而 生 了 。ECMA 〈 欧 洲 计 算 机 制造 
商 协会 ) 创建 了 ECMA-262 标准 ， 该 标准 脱离 了 浏览 器 和 那些 Web 独 有 的 特性 ,集中 描述 
了 JavaScript 作为 编程 语言 的 核心 部 分 。 

大 致 上 ，JavaScript 这 个 术语 通常 涵盖 了 以 下 3 个 部 分 。 


@ ECMAScript 一 一 语言 的 核心 部 分 ( 即 变量 ， 函 数 ， 循 环 等 等 )， 这 个 部 分 独立 于 


> 
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浏览 器 之 外 ， 并 可 以 在 


@ 文档 对 象 模型 (DOM): 

式 。 最 初 ，JavaScript 只 能 提供 
在 表单 ， 超 链接 和 和民 
已 经 可 以 访问 了 。 为 出 


其 他 环 


境 中 使 用 。 


它 实 际 上 是 提供 了 一 种 与 HTML、XML 文档 交互 的 方 


二 贝 


片 这 些 元 素 上 。 


而 上 一 部 分 元 素 的 有 限 访问 能 力 ， 主 要 集中 


后 来 权限 逐渐 被 扩大 ， 如 今 几乎 所 有 元 素 都 


L,， 万 维 


网 联盟 (W3C) 还 专门 创建 了 DOM 标准。 该 标准 
是 一 种 独立 的 〈 即 它 并 不 依赖 于 JavaScript) 操作 结构 化 文档 的 方式 。 


@ 浏览 器 对 象 模型 (BOMD): 这 实际 上 是 一 个 与 浏览 器 环境 有 关 的 对 象 集合 。 原 本 


没有 任何 标准 可 言 ， 


的 对 象 标准 。 


虽然 本 书 专门 有 一 个 章节 上 月 


于 阐述 


JavaScript 语言 的 核心 eo 
JavaScript 执行 环境 。 


浏览 器 的 战争 与 复兴 


您 在 这 


直到 HIMLS 诞生 之 后 ， 人 们 才 定 义 了 一 些 浏 览 器 之 间 通 用 


术 浏 览 器 、DOM 及 BOM， 但 大 部 分 内 容 还 都 在 讲述 
里 所 学 到 的 JavaScript 知识 基本 都 可 应 用 于 任何 


无 论 结果 是 好 是 坏 ，JavaScript I A at (大 约 是 在 1996 年 


- 和 Microsoft 这 两 大 浏览 


到 2001 年 间 ) | 那 时 了 


E 值 互联 网 发 展 处 于 第 一 波 热潮 ， 其 中 主要 由 


厂商 在 和 


夺 市 场 份额 。 在 此 过 程 中 ,他们 不 断 地 把 各 种 


华 的 特性 添加 到 各 自 的 浏览 器 与 Sn DOM 及 BOM 中 ， 从 而 导致 了 许多 不 一 致 


性 。 与 此 同时 ， 由 于 浏览 器 广 商都 在 忙 


新 相应 的 工具 ， 这 造成 了 天 
来 巨大 的 痛苦 。 我 们 将 某 个 浏览 器 


用 下 


却 本 不 能 正常 工作 ， 而 


误 先 知 。 
实现 上 的 不 一 致 ， 文 档 


。 这 一 切 都 令 开 发 者 们 再 也 没 ; 


人 


的 缺乏 ， 甚 至 


法 忍受 


想 引 入 浏览 器 提供 的 每 一 项 新 
颜色、 闪烁 的 文本 、 会 摇 哎 


这 不 但 牺牲 了 实用 性 ， 


的 浏览 器 窗口 、 


于 继续 增加 新 的 浏览 器 特性 ， 以 至 于 根本 没 能 及 时 
具 的 严重 滞后 。 这 种 情况 给 使 用 JavaScript 的 开发 人 员 
号 与 测试 过 的 脚本 在 另 一 个 浏览 器 里 测试 ， 却 发 
还 没有 合适 的 错误 信息 ， 只 得 到 如 “操作 终止 ”之 类 天 书 般 的 


车 能 将 JavaScript 关键 字 高 亮 显示 的 编辑 器 都 没 


企 另 一 方面 ， 开 发 者 自己 也 在 他 们 的 Web 页 面 中 使 用 了 太 多 的 新 特性 ， 总 迫不及待 地 
功能 ， 以 “加 强 ” 自 己 的 页 面 。 例 如 状态 栏 中 的 动画 、 闪 炸 


屏幕 上 的 雪花 效果 、 能 跟踪 对 象 的 鼠标 光标 
也 伤害 了 用 户 体验 。 这 些 滥用 现象 如 今 大 多 都 消失 了 ， 但 
这 在 当时 极 大 地 损坏 了 JavaScript 在 业界 的 名 声 。 


许多 “专业 的 ”程序 员 将 JavaScript 贬低 


4 JavaS 


遭 到 了 强烈 抵制 。 某 些 项 目 其 
们 自己 可 以 掌控 的 服务 器 端 。 确 


这 种 情况 一 直 持 续 到 第 
系列 历史 进程 的 推动 下 ， 终 了 


cript 面向 对 象 编程 指南 (第 2 版 ) 


为 设计 师 的 玩具 ， 并 批评 它 不 适合 用 来 开发 专业 应 用 。JavaScript 语言 在 一 些 Web 项 目 中 
i 完全 拒绝 对 浏览 器 端 进行 任何 的 程序 设计 ， 转 而 只 信任 他 


实 ， 在 当时 那 种 情况 下 ， 也 没有 什么 理由 值得 我 们 花费 双 
倍 的 时 间 来 为 这 些 不 同 的 浏览 器 设计 项 目 ， 然 后 再 花 更 多 的 时 间 去 调试 它们 。 

次 浏览 器 大 战 结束 。 但 在 随后 的 几 年 中 ，Web 开发 领域 在 一 
发 生 了 一 些 非常 积极 的 变化 。 


令 ”Microsoft 公司 依靠 新 发 布 的 IE6 赢得 了 战争 。 在 那 时 ，IE6 虽然 的 确 是 最 棒 的 浏 
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多 


在 这 种 健康 环境 的 影响 下 ， 开 发 人 员 开始 谋求 一 种 更 好 的 新 型 开发 模式 ， 以 取代 这 些 现 


有 的 开发 方式 。 随 着 Gmail 和 Google Maps 这 一 类 富 客户 端 应 用 的 相继 出 现 ， 很 显然 ， 如 今 


览 器 ， 但 其 后 数 年 ， 他 们 


却 停止 了 对 下 的 开发 ， 这 给 了 其 他 浏览 器 充分 的 时 间 ， 


使 它们 能 够 在 功能 上 逐步 完成 对 正 的 追赶 和 超越 。 


Web 标准 化 运动 渐渐 被 开发 人 员 和 浏览 器 厂商 所 接受 。 这 是 很 自然 的 ， 毕 竞 对 于 


开发 人 员 来 说 ， 谁 也 不 想 


因为 不 同 的 浏览 器 而 花费 双 倍 (甚至 更 多 ) 的 开发 时 间 ， 


这 促使 各 方 都 越 来 越 倾向 
开发 人 员 和 技术 本 身 也 日 
例如 可 用 性 、 渐 进 增强 技 
变 得 更 高 效 ， 减 轻 了 开发 


于 遵守 统一 的 开发 标准 。 

趋 成 熟 了 , 越 来 越 多 的 人 开始 将 注意 力 转移 到 其 他 方面 ， 
术 及 可 访问 性 。 开 发 辅助 工具 (例如 Firebug) 也 让 开发 
者 的 负担 。 


的 JavaScript 已 经 成 为 一 种 成 熟 的 、 


某 些 方面 独一无二 的 、 拥 有 强大 原型 体系 的 面向 对 象 语 


言 。 关 于 这 点 ， 最 好 的 例 


子 莫 过 于 是 对 XMLHttpRequest 对 象 的 重新 发 现 和 推广 ， 该 对 象 起 


初 不 过 是 一 个 下 -only 特性 ， 但 如 今 已 经 得 到 绝 大 多 数 浏览 器 的 支持 。 通 过 XMLHttpRequest 
对 象 ，JavaScript 就 能 以 HTTP 请 求 的 形式 从 服务 器 上 获取 所 需 的 新 鲜 内 容 ， 从 而 实现 了 页 
面 的 局 部 更 新 。 这 样 一 来 ， 我 们 就 不 必 每 次 都 刷新 整个 页 面 。 随 着 XMLHttpRequest 对 象 的 


广泛 应 月 


1.3 


有 ， 一 种 类 桌面 式 的 Web 应 


分 析 现 状 


JavaScript 来 实现 以 下 功能 。 
创建 拥有 强大 而 丰富 功能 的 Web 应 用 程序 (这 种 应 用 程序 往往 运行 在 Web 浏览 


多 


中 )。 另 外 还 有 基于 HTML5 的 许多 特性 ， 例 如 应 用 缓存 、 本 地 存储 、 本 地 数据 库 。 


模式 诞生 了 ， 我 们 称 之 为 AJAX 应 用 。 


有 意思 的 是 ，JavaScript 必须 运行 于 某 种 宿主 环境 中 。Web 浏览 器 仅仅 是 其 中 一 种 ， 
JavaScript 也 完全 可 以 运行 在 服务 器 端 、 桌 面 以 及 移动 设备 中 。 如 今 ， 我 们 已 经 可 以 用 
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无 论 是 线 上 应 用 还 是 离线 应 用 ，Web 应 用 都 可 以 做 得 非常 强大 。 


令 ”使 用 .NET 和 Nodejs 编写 服务 器 端 脚本 ， 或 者 使 用 Rhino 〈 这 是 一 种 用 Java 实现 
的 JavaScript 引擎 ) 这 样 的 框架 来 进行 编程 。 

令 ”为 移动 设备 编写 各 种 应 用 程序 。 借 助 于 PhoneGap 及 Titanium 这 样 的 工具 ， 我 们 
完全 可 以 使 用 纯 JavaScript 来 编写 iPhone、Android 或 其 他 平台 上 应 用 程序 。 另 外 
值得 一 提 的 是 ， 移 动 平台 Firefox OS 的 原生 编程 语言 就 是 JavaScript、HTML 和 
CSS。 


令 使 用 ActionScript 创建 富 媒 体 应 用 (如 Flash、Flex)。ActionScript 也 是 一 种 基于 
ECMAScript 标准 的 脚本 语言 。 
编写 各 种 基于 命令 行 的 、 用 于 桌面 自动 化 管理 的 脚本 任务 。 其 自 带 的 宿主 环境 如 
Windows Scripting Host 及 Mac 下 的 WebKit JavaScript Core。 
9 ， 为 一 些 桌面 应 用 程序 编写 扩展 或 插件 ， 例 如 Dreamweaver、Photoshop 及 大 多 数 浏 
览 器 。 
令 ” 使 用 Mozilla XUIRunner 及 Adobe Air 创建 跨 操作 系统 的 桌面 应 用 程序 。 
使 用 Yahoo! Widgets 及 Mac Dashboard Widgets 等 工具 包 来 创建 桌面 小 工具 。 其 中 ， 
Yahoo! Widgets 还 可 以 在 智能 电视 上 运行 。 
当然 ， 这 里 列 出 的 远 远 不 是 该 语言 的 全 部 应 用 。JavaScript 应 用 的 确 发 端 于 Web 页 面 ， 
但 如 今 几乎 可 以 说 是 无 所 不 在 了 。 另 外 ， 浏 览 器 厂商 如 今 都 将 运行 速度 视 为 产品 的 竞争 优 
势 之 一 ， 因 此 都 致力 于 创建 更 快 的 JavaScript 引擎 。 这 对 于 用 户 与 开发 者 来 说 无 疑 是 个 好 
消息 ， 并 且 这 将 打开 一 扇 大 门 一 一 在 新 的 领域 ， 例 如 在 图 像 、 音 频 及 视频 处 理 、 游 戏 开发 
等 方面 ，JavaScript 也 必 将 一 展 拳脚 。 


1.4 展望 未 来 


汪 


对 于 未 来 的 情况 ， 我 们 这 里 只 能 做 一 些 猿 测 。 但 几乎 可 以 肯定 地 说 ，JavaScript 语言 必 
将 会 有 它 的 一 席 之 地 。 毕 竟 ， 在 过 去 相当 长 的 一 段 时 间 里 ，JavaScript 在 被 严重 低估 、 始 终 
未 得 到 充分 利用 (或 者 被 错误 地 滥用 了 ) 的 情况 下 ， 依 然 几乎 每 天 都 能 有 很 多 新 的 、 有 趣 
的 JavaScript 应 用 被 开发 出 来 ,一切 都 是 从 那 行 简单 的 、 内 骨 于 HTML 标签 中 (例如 onclick 
事件 ) 的 代码 开始 的 。 如 今 的 开发 人 员 所 面 对 的 商业 开发 往往 要 复杂 得 多 ， 这 需要 良好 的 
设计 和 规划 ， 以 及 合适 的 应 用 扩展 和 程序 库 。JavaScript 必 将 在 其 中 得 到 真正 的 用 武之 地 ， 
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开发 人 员 无 疑 会 更 加 重视 它 独 有 的 面向 对 象 特性 ， 以 获取 越 来 越 多 的 便利 。 

曾经 被 列 为 职位 要 求 中 的 “加 分 项 ”的 JavaScript， 如 今 已 经 成 为 了 招聘 Web 开发 人 
员 的 决定 性 因素 。 例 如 ， 我 们 在 面试 时 常会 被 问 到 这 样 的 问题 “JavaScript 是 一 种 面向 对 
象 语言 吗 ? 如 果 是 ，JavaScript 中 的 继承 关系 是 如 何 实现 的 呢 ? ”在 读 过 这 本 书 之 后 ， 您 就 
会 对 这 类 面试 有 充分 的 准备 , 甚至 还 能 凭借 一 些 连 面试 官 自 己 都 不 知道 的 知识 来 打动 他 们 。 


1.5 ECMAScript5 


几乎 所 有 的 现代 浏览 器 与 其 他 相关 环境 都 实现 了 ECMAScript 的 第 3 版 ， 对 此 我 们 可 
以 安心 使 用 。 第 4 版 则 直接 被 跳 过 了 。 而 ECMAScript 的 第 5 版 〈 以 下 简称 为 ES53) 则 到 
2009 年 12 月 才 被 正式 采纳 。 


ES5 中 除了 引入 了 一 些 新 的 对 象 与 属性 外 ， 它 还 提供 了 “严格 模式 (strict mode)”。 所 
谓 严格 模式 其 实 就 是 在 ES5 发 布 之 前 ， 市 面 上 各 版 互 不 兼容 语言 的 子 集 。 严 格 模 式 是 可 选 
的 ， 也 就 是 说 ， 选 择 以 严格 模式 执行 的 代码 段 ( 以 函数 为 单位 ， 或 者 整个 程序 ) 都 必须 要 
在 其 头 部 作 如 下 声明 ， 


"use strict"; 


这 其 实 是 一 个 JavaScript 字符 串 。 虽 然 我 们 并 没有 将 其 赋值 给 某 个 变量 ， 执 行 后 也 不 
会 有 什么 效果 ， 但 它 符合 JavaScript 语法 。 因 此 不 支持 ES5 严格 模式 的 老式 浏览 器 会 直接 
忽略 它 ， 然 后 以 普通 的 JavaScript 对 待 其 后 的 代码 。 也 就 是 说 ， 这 种 严格 模式 是 向 后 兼容 
的 ， 使 用 严格 模式 不 会 导致 老式 浏览 器 无 法 执行 代码 。 

或 许 在 将 来 的 版 本 中 ， 严 格 模式 由 可 能 会 成 为 ES 的 默认 模式 ， 甚 至 是 唯一 模式 。 但 
现在 它 还 只 是 一 个 可 选项 。 

出 于 向 后 兼容 的 考虑 ， 本 书 所 有 的 示例 都 将 遵守 ES3 规则 ， 但 同时 本 书 中 所 有 的 代码 
也 都 能 在 ES5 严格 模式 下 正常 执行 ， 不 会 有 任何 警告 。 另 外 ， 本 书 中 专门 为 ES5 所 写 的 部 
分 会 被 清楚 地 标记 出 来 。 而 关于 ES5 的 新 特性 ,我们 在 附录 C， 内 建 对 象 中 会 有 详细 收录 。 


1.6 面向 对 象 的 程序 设计 


在 深入 学 习 JavaScript 之 前 ， 我 们 首先 要 了 解 一 下 “面向 对 象 ”的 具体 含义 ， 以 及 这 
程序 设计 风格 的 主要 特征 。 下 面 我们 列 出 了 一 系列 在 面向 对 象 程 序 设计 〈OOP) 中 最 常 


用 到 的 概念 : 
人 对 象 、 


全 9@ $$ $$ 


S 多 


方法 、 


TH 
囊 
应 


重用 与 继承 ; 
态 。 


现在 ， 我 们 就 
手 ， 或 者 不 能 确定 
一 些 代码 来 为 您 具 


来 详 绢 
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了 解 每 个 概念 。 当 然 ， 如 果 您 在 面向 对 象 程序 设计 方面 是 
自己 是 否 真 的 理解 了 这 些 概念 ， 那 也 不 必 太 过 担心 。 以 后 我 们 还 会 通过 


个 新 


体 分 析 它 们 。 尽 管 这 些 概念 说 起 来 好 像 很 复杂 、 很 高 级 ， 但 一 旦 我 们 进 


入 真正 的 实践 ， 事 
1.6.1 对 象 


既然 这 种 程序 


情 往往 就 会 简单 得 多 。 


设计 风格 叫做 面向 对 象 ， 那 么 其 重点 就 应 该 在 对 象 上 。 而 所 谓 对 象 ， 实 


质 上 歌 是 指 “ 事 物 


”( 包 括 人 和 物 ) 在 程序 设计 语言 中 的 表现 


任何 东西 《如 某 个 客观 存在 的 对 象 ， 或 者 某 些 较为 抽象 的 概念 )。 例 如 ， 


EB 式 。 这 里 的 “事物 ” 


可 以 是 


对 于 猫 这 


常见 对 


象 来 说 ， 我 们 可 以 看 到 它们 具有 某 些 明确 的 特征 〈 如 颜色 、 名 字 、 体 型 等 )， 能 执行 菜 些 动 
FP， 这 些 对 象 特征 都 叫做 属性 ， 而 


作 “〈 如 嘲 噶 叫 、 睡 觉 、 躲 起来、 逃跑 等 )。 在 OOP 语义 


那些 动作 则 被 称 为 方法 。 
此 外 ， 我 们 还 有 一 个 口语 方面 的 类 比 "。 
令 ”对象 往 往 是 用 名 词 来 表示 的 《如 book、person)。 
令 方法 一 般 都 是 些 动 词 ( 如 read、run)。 
4 属性 值 则 往往 是 一 些 形容 词 。 
我 们 可 以 试 一 下 。 


(名 词 ) 就 是 一 个 对 象 ,“black”( 形 容 词 ) 则 是 一 个 颜色 属性 值 ， 
表 一 个 动作 ， 也 就 是 OOP 语义 中 的 方法 。 
也 可 以 将 句子 中 的 “on my head” 看 做 动作 “sleep” 的 一 个 


列 如 ， 在 “The black cat sleeps on my head” 这 个 句子 中 ， 


至 ,为 了 i 


里 应 该 特 指 英 文 环境 ， 在 中 文 这 种 形 而 上 的 语言 环境 中 ， 这 种 类 比 或 许 并 


才 


步 证 明 这 
R 定 条 件 ， 


:是 太 合适 。 一 一 译 者 注 


| 


“the cat” 


而 “sleep”( 动 词 ) 则 代 


' 类 比 的 合理 怕 


FE， 我 们 


因此 ， 它 也 可 以 被 
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当做 传递 给 sleep 方法 的 一 个 参数 。 
1.6.2 类 


在 现实 生活 中 ， 相 似 对 象 之 间 往 往 都 有 一 些 共同 的 组 成 特征 。 例 如 蜂鸟 和 老鹰 都 具有 
鸟 类 的 特征 ， 因 此 它们 可 以 被 统称 为 鸟 类 。 在 OOP 中 ， 类 实际 上 就 是 对 象 的 设计 蓝图 或 制 
作 配 方 。“ 对 象 ”这 个 词 ， 我 们 有 时 候 也 叫做 “实例 ” 所 以 我 们 可 以 说 老 认 是 鸟 类 的 一 个 
实例 "。 我们 可 以 基于 同一 个 类 创建 出 许多 不 同 的 对 象 。 因 为 类 更 多 的 是 一 种 模板 ， 而 对 象 
则 是 在 这 些 模 板 的 基础 上 被 创建 出 来 的 实体 。 
但 我 们 要 明白 ，JavaScript 与 C++ 或 Java 这 种 传统 的 面向 对 象 语言 不 同 ， 它 实际 上 压 
根 儿 没 有 类 。 该 语言 的 一 切 都 是 基于 对 象 的 ， 其 依靠 的 是 一 套 原型 (prototype) 系统 。 而 
原型 本 身 实 际 上 也 是 一 种 对 象 ， 我 们 后 面 也 会 再 来 详细 讨论 这 个 问题 。 在 传统 的 面向 对 象 
语言 中 ， 我 们 一 般 会 这 样 描述 自己 的 做 法 :“ 我 基于 Person 类 创建 了 一 个 叫做 Bob 的 新 对 
象 .” 而 在 这 种 基于 原型 的 面向 对 象 语言 中 ， 我 们 则 要 这 样 描述 :“ 我 将 现 有 的 Person 对 象 
扩展 成 了 一 个 叫做 Bob 的 新 对 象 。” 


1.6.3 封装 


封装 是 另 一 个 与 OOP 相关 的 概念 ， 其 主要 用 于 阐述 对 象 中 所 包含 的 内 容 。 封 装 概念 通 
常 由 两 部 分 组 成 。 

令 ”相关 的 数据 (用 于 存储 属性 )。 

令 ”基于 这 些 数据 所 能 做 的 事 ( 所 能 调用 的 方法 )。 

除 此 之 外 ， 这 个 术语 中 还 有 男 一 层 信 息 隐 藏 的 概念 ， 这 完全 是 另 一 方面 的 问题 。 因 此 ， 
我 们 在 理解 这 个 概念 时 ， 必 须要 留意 它 在 OOP 中 的 具体 语 境 。 

以 一 个 MP3 播放 器 为 例 。 如 果 我 们 假设 它 是 一 个 对 象 ， 那 么 作为 该 对 象 的 用 户 ， 我 们 
无 疑 需要 一 些 类 似 于 像 按钮 、 显 示 屏 这 样 的 工作 接口 。 这 些 接口 会 帮助 我 们 使 用 该 对 象 (如 
播放 歌曲 之 类 )。 至 于 它们 内 部 是 如 何 工作 的 ， 我 们 并 不 清楚 ， 而 且 大 多 数 情况 下 也 不 会 在 
乎 这 些 。 换 句 话 说， 这些 接口 的 实现 对 我 们 来 说 是 隐藏 的 。 同 样 的 ， 在 OOP 中 也 是 如 此 。 
当 我 们 在 代码 中 调用 一 个 对 象 的 方法 时 ， 无 论 该 对 象 是 来 自我 们 自己 的 实现 还 是 某 个 第 三 
方 库 ， 我 们 都 不 需要 知道 该 方法 是 如 何 工作 的 。 在 编译 型 语言 中 ， 我 们 甚至 都 无 法 查看 这 些 
对 象 的 工作 代码 。 由 于 JavaScript 是 一 种 解释 型 语言 ， 源 代码 是 可 以 查看 的 。 但 至 少 在 封装 


”至 少 在 中 文 环境 中 ， 老 座 更 像 是 鸟 类 的 一 个 子 类 。 希 望 读者 在 理解 对 象 与 类 的 关系 时 ， 不 要 过 分 依赖 这 种 类 比 。 一 一 译 者 注 
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概念 上 它们 是 一 致 的 ， 即 我 们 只 需要 知道 所 操作 对 象 的 接口 ， 而 不 必 去 关心 它 的 具体 实现 。 


关于 信息 隐藏 ， 还 有 另 一 方面 内 容 ， 即 方法 与 属性 的 可 见 性 。 在 某 些 语言 中 ， 我 们 能 通 


过 public、private、protected 这 些 关键 字 来 限定 方法 和 属性 的 可 见 性 。 这 种 限定 分 类 定义 了 
对 象 用 户 所 能 访问 的 层次 。 例 如 ，Pprivate 方法 只 有 其 所 在 对 象 内 部 的 代码 才 有 权 访 问 ， 而 


public 方法 则 是 任何 人 都 能 访问 的 。 在 JavaScript 中 ， 尽 管 所 有 的 方法 和 属性 都 是 public 的 ， 


但 是 我 们 将 会 看 到 ， 该 语言 还 是 提供 了 一 些 隐 藏 数据 的 方法 ， 以 保护 程序 的 隐 密 性 。 


1.6.4 聚合 


所 谓 聚 合 ， 有 时 候 也 叫做 组 合 ， 实 际 上 是 指 我 们 将 几 个 现 有 对 象 合 # 


成 
过 程 。 总 之 ， 这 个 概念 所 强调 的 就 是 这 种 将 多 个 对 象 合 而 为 一 的 能 力 。 通 过 聚合 这 种 强 有 


个 新 对 象 的 


力 的 方法 ， 我 们 可 
管理 〈 便 于 我 们 各 个 击破 )。 当 一 个 问题 域 的 复杂 程度 令 我 们 难以 接受 时 ， 我 们 就 可 以 考虑 


以 将 一 个 问题 分 解 成 多 个 更 小 的 问题 。 这 样 一 来 ， 问 题 就 会 显得 更 易于 


将 它 分 解 成 若干 子 问题 区 ， 并 且 必 要 的 话 ， 这 些 问 题 区 还 可 以 再 继续 分 解 成 更 小 的 分 区 。 


这 样 做 有 利于 我 们 从 几 个 不 同 的 抽象 层次 来 考虑 这 个 问题 。 


例如 , 个 人 电脑 是 一 个 非常 复杂 的 对 象 , 我 们 不 可 能 知道 它 启 动 时 所 发 生 的 全 部 事情 


ka 


o 


但 如 果 我 们 将 这 个 问题 的 抽象 级 别 降低 到 一 定 的 程度 ， 只 关注 它 儿 个 组 件 对 象 的 初始 化 工 
作 ， 例 如 显示 器 对 象 、 鼠 标 对 象 、 键 盘 对 象 等 ， 我 们 就 很 容易 深入 了 解 这 些 子 对 象 情况 ， 
然后 再 将 这 些 部 分 的 结果 合并 起 来 ， 之 前 那个 复杂 问题 就 迎刃而解 了 。 

我 们 还 可 以 找到 其 他 类 似 情 况 ， 例 如 Book 是 由 一 个 或 多 个 author 对 象 、publisher 对 
象 、 若 干 chapter 对 象 以 及 一 组 table 对 象 等 组 合 ( 聚 合 ) 而 成 的 对 象 。 


1.6.5 ”继承 
通过 继承 这 


方式 ， 我 们 可 以 非常 优雅 地 实现 对 现 有 代码 的 重用 。 例 如 ， 我 们 有 一 个 


叫做 Person 的 一 般 性 对 象 ， 其 中 包含 一 些 姓名 、 出 生日 期 之 类 的 属性 ， 以 及 一 些 功能 怕 
数 ， 如 步行 、 谈 话 、 睡 觉 、 吃 饭 等 。 然 后 ， 当 我 们 发 现 自己 需要 一 个 Programmer 对 象 时 ， 
当然 ， 这 时 候 你 可 以 再 将 Person 对 象 中 所 有 的 方法 与 属性 重新 实现 一 遍 ， 但 除 此 之 外 还 有 


E 阴 


一 种 更 聪明 的 做 法 , 即 我 们 可 以 让 Programmer 继承 自 Person, 这 样 就 省 去 了 我 们 不 少 工作 。 


因为 Programmer 对 象 只 需要 实现 属于 它 自己 的 那 部 分 特殊 功能 (例如 “编写 代码 ”)， 而 其 


余部 分 只 需 重 用 Person 的 实现 即 可 。 


在 传统 的 OO 


P 环境 中 ， 继 承 通常 指 的 是 类 与 类 之 间 的 关系 ， 但 由 于 JavaScript 中 不 存 


在 类 ， 因 此 它 的 继承 只 能 发 生 在 对 象 之 间 。 
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当 一 个 对 象 继承 自 另 一 个 对 象 时 ， 通 常会 往 其 中 加 入 新 的 方法 ， 以 扩展 被 继承 的 老 对 
象 。 我 们 通常 将 这 一 过 程 称 之 为 “B 继承 自 A” 或 者 “B 扩展 自 A”。 另 外 对 于 新 对 象 来 说 ， 
它 也 可 以 根据 自己 的 需要 ， 从 继承 的 那 组 方法 中 选择 几 个 来 重新 定义 。 这 样 做 并 不 会 改变 
对 象 的 接口 ， 因 为 其 方法 名 是 相同 的 ， 只 不 过 当 我 们 调用 新 对 象 时 ， 该 方法 的 行为 与 之 前 
不 同 了 。 我 们 将 这 种 重 定义 继承 方法 的 过 程 叫做 覆 写 。 


1.6.6 多 态 


在 之 前 的 例子 中 ， 我 们 的 Programmer 对 象 继承 了 上 一 级 对 象 Person 的 所 有 方法 。 
人 
即便 是 在 我 们 不 知道 它 是 一 个 Person 对 象 还 是 一 个 Programmer 对 象 情况 下 ， 也 依然 可 以 
直接 调用 该 对 象 的 “talk” 方 法 ， 而 不 必 担 心 这 会 影响 代码 的 正常 工作 。 类 似 这 种 不 同 对 象 
通过 相同 的 方法 调用 来 实现 各 自行 为 的 能 力 ， 我 们 就 称 之 为 多 态 。 


1.7 OOP 小结 


下 面 ， 让 我 们 再 来 


| 


顾 一 下 这 些 概念 〈 见 表 1-1)。 


表 1-1 

特征 描述 相应 概念 
Bob 是 一 个 男人 《后 者 是 一 个 对 象 ) 对 象 
Bob 出 生 于 1980 年 6 月 1 日， 男性， 黑头 发 属性 
Bob 能 吃饭 、 睡 觉 、 喝 水 、 做 梦 ， 以 及 记录 自己 的 年 龄 方法 
Bob 是 Programmer 类 的 一 个 实例 传统 OOP 中 的 类 
Bob 是 一 个 由 Programmer 对 象 扩展 而 来 的 新 对 象 基于 原型 OOP 中 的 原型 对 象 
Bob 对 象 中 包含 了 数据 (例如 出 生日 期 和 基于 这 些 数据 的 方法 (例如 着 归 
记录 年 龄 ) 
我 们 并 不 需要 知道 其 记录 年 龄 的 方法 是 如 何 实现 的 。 对 象 通常 都 可 以 拥有 二 息 隐 藏 
些 私有 数据 ， 例 如 对 半年 二 月 的 天 数 ， 我 们 就 不 知道 ， 而 且 也 不 会 想 知道 | 
Bob 只 是 是 整个 Web 开发 团队 对 象 的 一 部 分 , 此 外 开发 团队 对 象 还 包含 

聚合 、 组 合 

了 一 个 Designer 对 象 Jil， 以 及 一 个 ProjectManager 对 象 Jack 
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特征 描述 


相应 概念 


Designer、ProjectManager、Programmer 都 是 分 别 扩展 自 Person 


对 象 的 新 对 象 


我 们 可 以 随时 调用 Bob、Jill 和 Jack 这 三 个 对 象 各 自 的 talk 方法， 它们 
都 可 以 正常 工作 ,尽管 这 些 方法 会 产生 不 同 的 结果 (如 Bob 可 能 谈 得 更 
多 的 是 代码 的 性 能 ，JI 更 倾向 于 谈 代码 的 优雅 性 ， 而 Jack 强调 的 是 最 
后 期 限 )。 总 之 ， 每 个 对 象 都 可 以 重新 自 定义 它们 的 继承 方法 talk 


1.8 训练 环境 设置 


多 态 、 方 法 宪 写 


在 这 本 书 中 ， 凡 涉及 代码 的 我 们 都 强调 “自己 动手 ”因为 在 我 们 的 理念 中 ， 学 好 一 


门 编程 语言 最 好 的 途径 就 是 不 停 地 编写 代码 。 因 此 ， 这 里 将 不 提供 任何 可 供 您 


直接 复 秆 


一 同 


/ 


粘贴 的 代码 下载。 恰恰 相反 ， 我 们 必须 得 让 您 亲自 来 输入 代码 ， 并 观察 它们 是 如 何 工作 


的 ， 思 考 需 要 做 哪些 调整 ， 这 样 周而复始 地 摆弄 它们 。 因 而 ， 当 您 想 尝 试 这 些 代 码 示例 
时 ,我 们 建议 您 使 用 JavaScript 控制 台 这 一 类 的 工具 。 下 面 就 让 我 们 来 看 看 这 些 工具 是 如 
何 使 用 的 。 


对 于 开发 人 员 来 说 ， 机 器 上 应 该 大 多 都 早已 安装 了 -一些 Web 浏览 器 了 ， 例 如 Firefox、 


Safari、Chrome 或 Internet Explorer。 而 所 有 现代 浏览 器 中 都 应 该 自 带 了 JavaScript 控制 
件 ， 该 组 件 是 我 们 在 阅读 本 书 过 程 中 始终 会 用 到 的 东西 ， 是 帮助 您 进行 
环境 。 更 具体 地 说 ， 尽 管 本 书 用 的 是 WebKit 控制 台 (Safari 和 Chrome 都 支持 该 控 


但 书 中 的 这 些 示例 在 任何 控制 台 上 都 是 能 正常 工作 的 。 
1.8.1 WebKit 所 附带 的 Web 审查 工具 


们 自己 指定 的 图 片 。 如 您 所 见 ， 我 们 可 以 在 任何 页 面 上 测试 这 段 JavaScript 代码 。 


标签 ， 就 来 到 了 真正 的 控制 台 界 面 中 。 


然后 ， 我 们 直接 在 控制 台中 输入 代码 ， 按 下 回 车 键 ， 代 码 就 会 被 执行 。 


台 组 


语言 学 习 和 实验 的 
央 台 


合 )， 


图 1-1 展示 了 如 何在 控制 台中 通过 输入 代码 的 方式 将 google.com 主页 上 的 logo 换 成 我 


在 Chrome 和 Safari 中 ,您 可 以 通过 右键 单 击 相 关 页 面 ， 并 选择 “审查 元 素 ” 来 打开 控 
制 台 。 然后 Web 审查 工具 就 会 出 现在 下 面 的 弹出 窗口 中 , 我 们 选择 其 标签 栏 上 的 “ 控 带 


人 


一 -局 


其 返回 值 也 会 在 控 
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制 台中 被 打印 出 来 。 代 码 会 在 当前 页 面 的 上 下 文 环境 中 和 运行， 所 以 ， 如 果 您 在 其 中 输入 
location .href， 控 制 台 就 会 返回 当前 页 面 的 URL。 除 此 之 外 ， 该 控制 台 还 具有 一 套 自动 完成 功 
能 , 其 工作 方式 与 我 们 平时 所 用 的 操作 系统 命令 行 类 似 。 举 个 例子 , 如 果 我 们 在 其 中 输入 docu， 
然后 按 Tab 键 ，docu 就 会 被 自动 补 全 为 document。 这 时 如 果 再 继续 输入 一 个 “.”( 点 操作 符 )， 
我 们 就 可 以 通过 重复 按 Tab 键 的 方式 来 壳 历 document 对 象 中 所 有 可 调用 的 方法 和 属性 。 


We 


【古训 Google 
[< | thttp:/ /www.google.com/ ©® IQ- Google 】 


Web Images Videos Maps News Shopping Gmail more~ Signin 将 


Google Search | I'm Feeling Lucky 


[x】 [Bements 后 | Resources | Scripts [CW nimeline 多 Profiles J storage | yeonsotel Q 


cktpub. com/sites/default/files/bookimages/1847194141. jpg"; 
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另外 通过 上 下 箭头 键 ， 我 们 还 可 以 随时 从 相关 列表 中 找 回 已 经 执行 过 的 命令 ， 并 在 控 
制 台 中 重新 执行 它们 。 

通常 情况 下 ， 控 制 台 只 提供 单行 输入 ， 但 我 们 可 以 用 分 号 做 分 割 符 来 执行 多 个 
JavaScript 语句 。 而 如 果 您 需要 更 多 行 代码 的 话 , 也 可 以 通过 组 合 键 shiftt+Enter 来 实现 换行 ， 
在 这 种 情况 下 代码 不 会 被 立即 执行 。 


1.8.2 Mac 上 的 JavaScriptCore 


在 Mac 上 ， 我 们 事实 上 不 用 浏览 器 也 可 以 通过 终端 来 执行 JavaScript。 
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如 果 您 之 前 没有 使 用 过 终端 ， 可 以 通过 Spotlight 找 到 它 。 打 开 终 端 之 后 ， 在 其 中 输入 : 


alias jsc='"/System/Library/Frameworks/JavaScriptCore.framework/Versions/CuUrrent/Resources/jsc'" 


该 命令 为 JSC 〈 即 JavaScriptCore) 设置 了 一 个 别名 。JSC 其 实 是 WebKit 引擎 的 一 部 


分 。Mac 系统 自 带 有 该 引擎。 


我 们 也 可 以 直接 将 这 个 alias 命令 放 入 ~/.profile 文件 ， 这 样 每 次 打开 终端 时 ， 都 可 以 通 


过 jsc 这 个 别名 来 启动 JavaScriptCore 了 。 


现在 ， 终 端 在 任何 目录 下 都 可 以 通过 直接 输入 jsc 来 打 ] 


于 其 交互 环境 了 。 然 后 您 可 


以 在 其 中 输入 相关 的 JavaScript 表达 式 。 按 下 Enter 键 之 后 ， 表 达 式 的 结果 就 会 被 显示 


出 来 ， 如 图 1-2 所 示 。 


全 六 后 Terminal 一 jsc 一 80x24 


Last login: Tue May 31 81:87:35 on ttys@82 
stoyanstefanov:i~ stoyanstefanovs$ jsc 

> 1+1 

2 

> var a = "hello"; 

undefined 


> var b = "console"; 
undefined 

> bb 

console 

> 有 
hello console 

> 


1:2 


1.8.3 更 多 控制 台 


如 今 , 几乎 所 有 现代 浏览 器 都 有 自 带 的 控制 台 。 除了 之 前 提 到 的 Chrome 及 Safari 的 控 


另外 , 新 版 的 Firefox 中 也 有 一 个 自 带 的 控制 台 , 您 可 以 通过 
控制 台 ” 来 打开 它 ， 如 图 1-3 所 示 。 


制 台 之 外 ，FireFox 浏览 器 的 所 有 版 本 也 都 能 安装 Firebug 组 件 , 该 组 件 中 也 有 一 个 控制 台 。 


#5 
viz 日 


和 栏 “ 工 具 /Web 开发 者 /Web 


个 
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图 1-3 


而 Internet Explorer 从 第 8 版 开始 ， 只 要 


后 ， 按 Script 标签 栏 就 可 进入 控制 台 。 


按 下 Fl12 键 就 可 以 打开 开发 者 工具 组 件 。 打 开 


另外 ， 


过 Nodejs 的 交互 环境 来 学 习 JavaScript 也 是 一 个 不 错 的 选择 。 您 可 以 从 


过 


0 中 获取 并 安装 Node.js， 然 后 在 终端 中 尝试 其 控制 台 ， 如 图 1-4 所 示 。 


BOe 


stoyanstefmbpl15:~ stoyanstefanovs$ node 
> var a = 1; var b = 2; 

undefined 

>a+b; 


> 

(*C again to quit) 

> 

stoyanstefmbpl1l5:~ stoyanstefanov$ cat test.js 
var a = 181; 

var b = 202; 


console.1logla + b); 

stoyanstefmbpl15:~ stoyanstefanovs$ node test. js 
383 

stoyanstefmbpl15:~ stoyanstefanovg$ 目 


谷 stoyanstefanov 一 bash 一 79x21 ie 


如 您 所 见 , 我 们 既 可 以 用 Node.jjs 的 控 各 
的 shell 脚本 (如 截图 中 的 testjs)， 然 后 以 scriptname.js 的 


1.9 本章 小 结 
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| 台 测 试 一 些小 型 示例 , 同时 也 可 以 写 一 些 较 长 


在 这 一 章 中 ， 我 们 首先 介 


程序 设计 的 概念 进行 了 一 些 基本 论述 。 接 着 ,我 们 向 您 详细 
传统 的 基于 类 的 面向 对 象 语言 ， 而 
习 JavaScript 语言 、 掌 握 其 面向 对 象 特性 打下 了 一 定 的 基 而 


乡 式 在 Nodejjs 的 终端 中 执行 。 


了 JavaScript 语言 的 发 展 历程 和 现状 。 然 后 ， 对 面向 对 象 


阐述 了 为 什么 JavaScript 不 是 


一 套 独特 的 原型 系统 。 现 在 ， 您 已 经 为 下 一 步 深入 学 


旦 让 我 们 一 步 步 来 。 


TS 


9 


下 一 章 将 会 介绍 JavaScript 的 数据 类 型 (JavaScript 的 数据 类 型 非常 少 )， 以 及 条 件 、 循 


环 语 句 和 数组 。 如 果 您 确信 自己 


完全 没有 疑问 的 话 ， 那 么 就 请 自行 跳 过 这 一 章 吧 。 


省 且 对 该 章 结尾 处 的 那 几 个 小 练习 


第 2 章 
基本 数据 类 型 、 数 组 、 循 环 及 
条 件 表 达 式 


在 深入 学 习 JavaScript 的 面向 对 象 特性 之 前 ， 我 们 首先 要 了 解 一 些 基 础 性 知 
识 。 在 这 一 章 中 ， 我 们 将 会 从 以 下 几 个 方面 入 手 。 


令 ” JavaScript 中 的 基本 数据 类 型 ， 例 如 字符 串 和 数字 等 。 

9 数组 。 

常用 操作 符 ， 例 如 +、-、delete、typeof 等 。 

令 ”控制 流 语句 ， 例 如 循环 和 if-else 条 件 表达 式 等 。 
2.1 变量 


通常 ， 变 量 都 是 用 来 存储 数据 的 ， 即 它 是 存放 具体 数值 的 容器 。 当 我 们 编写 程序 
时 ， 用 变量 来 表示 实际 数据 会 更 方便 些 。 尤 其 是 当 我 们 需要 多 次 使 用 某 个 数字 时 ， 使 
变量 pi 显然 要 比 直 接 写 数字 值 3.141592653589793 方便 得 多 。 而 且 ， 之 所 以 称 它们 
人 可 以 改变 的 。 另 外 ， 在 
写 代 码 时 我 们 往往 也 可 以 用 变量 来 代表 某 些 程序 运行 前 还 未 知 的 数据 ， 例 如 某 个 计 
算 的 结果 值 。 


了 
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变量 的 使 用 通常 可 分 为 以 下 两 个 步 又。 
4 声明 变量 。 
令 ”初始 化 变量 ， 即 给 它 一 个 初始 值 。 
我 们 可 以 使 用 var 语句 来 声明 变量 ， 像 这 样 : 


Var a; 
Var thisIsAVariable; 
var and this too; 


var mixl2three; 


变量 名 可 以 由 字母 、 数 字 、 下 划 线 及 美元 符号 组 合 而 成 。 但 不 能 以 数字 开头 ， 像 下 面 
这 样 是 不 被 允许 的 : 


var 2three4five; 

而 所 谓 的 变量 初始 化 ， 实 际 上 指 的 是 变量 的 第 一 次 赋值 。 我 们 可 以 有 以 下 两 种 选择 。 
令 ” 先 声明 变量 ， 然 后 再 初始 化 。 

令 声明 变量 与 初始 化 同步 进行 。 

下 面 是 后 一 种 写法 的 例子 


Var a= 1; 
这 样 ， 我 们 就 声明 了 一 个 名 为 a、 值 为 1 的 变量 。 


另外 ， 我 们 也 可 以 在 单个 var 语句 中 同时 声明 〈 并 初始 化 ) 多 个 变量 ， 只 要 将 它们 分 
别 用 逗号 分 开 即 可 ， 例 如 : 


Var vl, v2, v3 = 'hello', v4 = 42, v5; 


有 时 候 出 于 代码 可 读 性 方面 的 考虑 ， 我 们 可 能 还 会 这 么 写 : 


Var vil, 
2 
V3 = 'hello', 
v4 = 42, 


VD 
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变量 名 中 的 $ 符 号 
变量 名 中 可 以 使 用 $ 符 号 ， 例 如 $myvar， 或 者 品味 
还 可 以 更 独特 一 点 ，my$var。 按 照 变量 命名 规范 ， 美 元 
届 符号 允许 出 现在 任意 位 置 ,但 其 实 旧版 的 ECMA 标准 是 
不 鼓励 使 用 美元 符号 命名 变量 的 ， 它 只 建议 在 生成 代码 
( 即 由 其 他 程序 输出 的 代码 ) 中 使 用 。 但 显然 JavaScript 
社区 并 没有 接受 该 建议 ， 在 实际 项 目 中 ， 以 单独 一 个 $ 
符 为 函数 名 的 做 法 比比 避 是 。 


区 分 大 小 与 


在 JavaScript 语言 中 , 变量 名 是 区 分 大 小 写 的 。 为 了 证 明 这 一 点 , 我 们 可 以 在 JavaScript 
控制 台中 测试 下 列 语句 每 输入 一 行 按 一 次 Enter 键 ): 


Var case matters = 'lower'; 


Var CASE MATTERS = 'upper'; 


case matters; 

CASE MATTERS; 

为 了 减少 按键 的 次 数 ， 在 输入 第 三 行 时 ， 我 们 可 以 先 键入 ca 然后 按 Tab 键 〈 或 右 方 向 
键 ), 控制 台 会 自动 将 其 补 全 为 case_matters。 最 后 一 行 也 是 如 此 ,我 们 只 需 先 输入 CASE 
然后 直接 按 Tab 即 可 。 输 入 完成 之 后 ， 最 终结 果 如 图 2-1 所 示 。 

为 方便 起 见 ， 以 后 我 们 将 用 代码 形式 来 代 栓 截图 。 上 面 的 例子 可 以 表示 如 下 : 


> Var case matters = 'lower'; 
> Var CASE MATTERS = 'upper'; 


> case matters; 
"lower" 


> CASE MATTERS; 

"upper" 

如 您 所 见 ， 大 于 号 (>) 之 后 的 内 容 就 是 我 们 输入 的 代码 ， 而 其 余部 分 则 是 控制 台 输 出 
的 结果 。 需 要 强调 的 是 ， 当 您 测试 类 似 的 代码 时 ， 应 该 根据 实验 的 实际 情况 来 调整 相关 代 
码 。 这 才能 有 助 于 您 更 好 地 理解 语言 的 工作 方式 。 
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Web Inspector 一 http:/ /www.facebook.com/ 
i 
Elements Resources Scripts Timeline Profiles Storage Console Search Console 
oD | Errors Warnings Logs 
> var case_matters = 'lower'; 
> yar CASE HATTERS = "Upper'; 
> CASE_MATTERS 
"upper" 
器 污 © 
2-1 
读者 有 时 可 能 会 看 到 某 个 表达 式 在 控制 台中 的 输出 
结果 为 undefineq。 这 大 多 数 情 况 下 是 完全 可 以 忽略 的 ， 
但 您 有 没有 想 过 ， 为 什么 这 些 表达 式 会 输出 undefined 
呢 ? 那 是 因为 控制 台 在 执行 完 我 们 输入 的 表达 式 之 后 ， 
总 是 要 输出 该 表达 式 的 运行 结果 。 但 有 一 些 表 达 式 〈 例 
p 如 var a = 1; ) 是 没有 任何 返回 值 的 。 在 这 种 情况 下 ， 
Kw 控制 台 就 会 隐 式 打印 一 个 undefined。 相 反 地 ， 当 一 个 
表达 式 确 实 有 返回 值 时 ， 比 如 之 前 的 例子 中 的 
case matters 或 是 1+1 之 类 的 表达 式 , 控制 台 就 会 将 该 
表达 式 的 实际 返回 值 打 印 出 来 。 当 然 ， 并 不 是 所 有 的 控 
制 台 都 会 在 没有 返回 值 时 打印 undefineq 值 ， 例 如 
Firebug 控制 台 就 不 会 这 样 做 。 
证 Jr 
2.2 ”操作 符 
所 谓 操作 符 ， 通 常 指 的 是 能 对 一 两 个 输入 执行 某 种 操作 ， 并 返回 结果 的 符号 。 为 了 更 


vv 


ss 


> 十 汪 2 
3 


段 代 码 包 含 了 以 下 几 点 信息 。 
+ 是 一 个 操作 符 。 


这 
令 
该 操作 是 一 次 加 法 运算 。 
4 
4 
令 


输入 值 为 1 和 2 (输入 值 也 叫做 操作 数 )。 
结果 值 为 3。 
1+2 这 个 整体 称 为 表达 式 。 


在 这 里 ，1 和 2 都 是 直接 参与 加 法 运算 的 。 接 下 来 我 们 要 将 它们 换 成 变量 ， 


声明 一 个 变量 来 存储 运算 结果 。 具 体 如 下 : 


> Var a= 1; 
> Var b = 2; 
,Bs 


在 表 2-1 中 ， 我 们 列 出 了 一 些 基 本 的 算术 运算 符 。 


表 2-1 


青 晰 地 表达 该 术语 的 含义 ， 我 们 先 来 看 一 个 具体 的 示例 : 


操作 符 相关 操作 


代码 示例 


> 二 27 


十 加 法 运算 


操作 符 


相关 操作 
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代码 示例 


Mm 


tt 


达 式 ”21 


续 表 


9 
88.99 


> 


% 


取 模 运算 ， 即 求 除法 运算 的 余数 


上 
CAI oo 


© 


取 模 运算 对 于 测试 一 个 整数 的 奇偶 怕 
要 让 该 数 对 2 执行 取 模 运算 ， 返 回 1 
可 0 则 都 为 偶数 


很 有 用 处 ， 只 需 
的 便 是 奇数 ， 返 


十 十 


下 


再 增 1 


> Var a = 123; 


前 置 的 ++ 操 作 会 先 将 值 增 1， 然 后 再 返回 


> Var a = 123; 
> Var b = ++ta; 
> b; 
124 
> a; 


124 
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操作 符 相关 操作 


续 表 
代码 示例 


后 置 的 一 一 


> 冯 


> "ar; 
> D3 


123 


122 
置 的 一 一 


~ YATE ‘dH 


减 1 运算 


区 


用 


> var b 
> Db» 


122 


事实 上 ， 当 我 们 输入 var a = 1; 这 样 的 语句 时 


操作 
2 


a 


操作 
工 2.32 


—-—a; 


， 所 执行 的 也 是 一 种 独立 的 操作 。 这 


» 
F 


操作 叫做 纯 赋 值 ， 因 而 “=” 也 被 称 为 简 

除 此 之 外 ，JavaScript 中 还 有 一 组 由 入 
们 为 复合 操作 符 (compound operator)。 这 些 操 作 
看 几 个 示例 : 


赋值 运 


他 


术 运 
局 广 订 全 已 


付 有 E 


> Var a = 5)， 

> 寺 三 .37 

8 

在 该 例 中 ，a += 37 实际 上 就 相当 于 a = a + 
> a -= 3; 

5 

同 理 ， 这 里 的 a -= 3; 等 同 于 a = a - 3; 


符 (simple assignment operator )。 


和 赋值 操作 组 合 而 成 的 操作 符 。 我 们 称 它 


让 我 们 的 代码 显得 更 为 紧凑 。 下 面 来 


3; 的 缩写 形式 。 


0 
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除了 我 们 已 经 提 到 的 算术 运算 与 赋值 操作 以 外 ，JavaScript 中 还 有 其 他 各 种 类 型 的 操作 
符 。 我 们 将 会 在 后 面 的 章节 中 陆续 看 到 。 


最 佳 实践 
表达 式 应 始终 是 以 分 号 为 结束 符 的 .尽管 JavaScript 
本 身 设 有 分 号 补 全 机 制 ， 即 如 果 您 忘 了 在 一 行 表达 式 之 
y 后 添加 分 号 ， 该 位 置 就 会 被 隐 式 地 补 上 一 个 分 号 。 但 这 
SN 种 机 制 同时 也 是 出 错 的 主要 源头 之 一 。 所 以 ， 最 好 还 是 
我 们 自己 要 记得 在 表达 式 结束 之 后 明确 地 用 分 号 来 关 
闭 该 表达 式 。 换 名 话说 ,虽然 >1+1 与 >1+1; 都 
属于 合法 的 表达 式 ， 但 为 了 强调 这 一 良好 的 编程 习惯 ， 
本 书 将 一 律 采 用 后 一 种 形式 。 


V 


2.3 ”基本 数据 类 型 


FL 
型 。 


我 们 在 程序 中 所 使 用 的 任何 值 都 是 有 类 型 的 。JavaScript 仅 有 以 下 几 大 基本 数据 


1， 数 字 一 一 包括 浮 点 数 与 整数 ， 例 如 这 些 都 属于 数字 : 1、100、3.14。 
2， 字符 串 包括 由 任意 数量 字符 组 成 的 序列 ， 例 如 : "a"、"one'"、 
3. 布 


尔 值 包括 true 和 false。 


"one 2 three"。 
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4. undefined 一 一 当 我 们 试图 访问 一 个 不 存在 的 变量 时 ， 
undefined。 除 此 之 外 ， 


变量 在 初始 化 之 前 的 值 


undefined。 


使 用 已 声明 却 未 赋值 的 变量 也 会 如 此 。 


5， null 


这 是 另 一 种 只 包含 一 个 值 的 特殊 数据 类 型 。 所 谓 的 null 值 ， 


就 会 得 到 一 个 特殊 值 : 


因为 JavaScript 


会 自动 将 
设 定 为 undefined。 而 undefined 类 型 的 值 只 有 一 个 一 一 


通常 是 指 


没有 值 或 空 值 ， 不 代表 任何 东西 。null 与 undefined 最 大 的 不 同 在 于 ， 被 赋予 null 的 
变量 通常 被 认为 是 已 经 定义 了 的 ， 只 不 过 它 不 代表 任何 东西 。 关 于 这 一 点 ， 我 们 稍 后 会 通 


过 一 些 具 体 的 示例 来 解释 。 


会 在 第 4 音 : 对 


象 中 深入 阐述 对 象 的 概念 ， 现 在 我 们 只 需要 记 住 一 点 ，JavaScript 9 


类 型 主要 分 为 以 下 两 个 部 分 : 


令 ”基本 类 型 (上面 列 出 的 五 种 类 型 )。 


人 ” 非 基 本 类 


型 《月 


中 对 象 )。 


2.3.1 查看 类 型 操作 符 一 一 typeof 


会 返回 一 个 代表 数据 类 


S HS $b 多 


2.3.2 ”数字 


最 简单 的 数字 类 型 当然 就 是 整数 了 ,如果 我 们 将 一 个 变量 赋值 


"number"; 
Sterling 
"boolean"; 
"undefined"; 
"object"; 
TEUTGtioOrs 


在 接 下 来 的 几 节 中 ， 我 们 将 会 在 例子 中 逐一 


就 会 返回 字符 串 "number": 


操作 符 ， 控 制 台 


的 对 象 《 东 西 )。 


任何 不 属于 上 述 五 种 基本 类 型 的 值 都 会 被 认为 是 一 个 对 象 。 甚 至 有 时 候 我 们 也 会 将 
null 视 为 对 象 ， 这 听 起 来 有 些 尴 熔 一 一 这 是 一 个 不 代表 任何 东西 


我 们 将 


FP 的 数据 


如 果 我 们 想 知道 某 个 变量 或 值 的 类 型 是 什么 ， 可 以 调用 特殊 操作 符 typeof。 该 操作 符 
型 的 字符 串 ， 以 下 是 其 可 能 返回 的 结果 : 


对 五 种 基本 数据 类 型 使 用 typeof 操作 。 


为 1, 并 对 其 调 


4 typeof 


日 


> var n= 1; 
> typeof n; 
"number" 

>n = 1234; 
> typeof n; 
"number" 


tr 


nl 
序 
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该 例 中 有 一 点 值得 注意 ， 即 当 您 第 二 次 设置 某 变 量 的 值 时 ， 就 无 需 再 用 到 var 语 
名 了 。 


号 


浮 点 数 ( 即 含 小 数 部 分 的 数字 ) 


> Var n2 = 1.23; 
> typeof n2; © 
"number" 


NDA 


当然 ， 我 们 也 可 以 直接 对 一 个 数值 调用 typeof， 并 非 一 定 得 


> typeof 123; 
"number" 


2.3.2.1 八进制 与 十 六 进 制 


然 也 是 Number 类 型 的 一 种 : 


赋值 给 变量 。 


瘟 
Mh 
0 
~ 
CE 
四 
Sy 
y 
Tr 


当 一 个 数字 以 0 开头 时 ,就 表示 这 是 一 个 八进制 数 。 例如， 八进制 数 0377 所 代表 的 就 


XE 


中 的 颜色 值 在 大 多 数 情况 下 就 是 用 十 六 进 制 


a 


制 数 255。 


> Var n3 = 0377; 
> typeof n3; 
"number" 


> 
255 


如 您 所 见 ， 例 子 中 最 后 一 行 所 输出 的 就 是 该 八进制 数 的 十 进 制 表示 形式 。 


或 许 您 对 八进制 数 还 不 太 熟 悉 ， 但 十 六 进 制 您 应 该 不 会 感到 陌生 ， 因为 CSS 样式 表 


9 此 处 原文 为 typeofn;， 但 根据 上 下 文 判断 应 


定义 的 。 


属 笔 误 ， 故 更 正 为 typeof n2;。 一 一 译 者 注 
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在 CSS 中， 我 们 有 好 几 种 方式 定义 颜色 ， 其 中 的 两 种 如 下 所 示 。 


令 ”使 用 十 进 制 数 分 别 指定 R( 红 )、G( 绿 )、B〔 蓝 ) 的 值 


“”， 取 值 范围 都 为 0 一 255。 


例如 rgb (0,0,0) 代 表 黑 色 、rgb (255,0,0) 代 表 红 色 ( 红 值 达 到 最 大 值 ， 而 绿 
3 


和 蓝 都 为 0 值 


Sy 
局 


信 ”使 用 十 六 进 制 数 ， 两 个 数位 代表 一 种 色 值 ， 依 次 是 R、G、B。 例 如 #000000 代 
等 于 255。 


表 黑 色 、#ff0000 代表 红色 ， 因 为 十 六 进 制 的 ££ 就 


在 JavaScript 中 ， 我 们 会 用 0x 前 绥 来 表示 一 个 十 六 进 制 值 


为 hex)。 


> Var n4 = 0x00; 
> typeof n4; 
"number" 


> 


> Var n5 = Oxff; 
> typeof n5; 
"number" 


> n5; 
255 


2.3.2.2 ”指数 表示 法 


一 个 数字 可 以 表示 成 lel (或 者 1e+1、1E1、1 


字 1 后面 加 1 个 0， 也 就 是 10。 同 理 ，2e+3 的 意思 是 


9 三 原色 模式 (RGB color model) 是 一 种 加 色 模 型 ， 指 种 原色 一 一 红色 、 


(hexadecimal value， 简 称 


E+1) 这 样 的 指数 形式 ， 意 思 是 在 数 


在 数字 2 后 面 加 3 个 0， 也 就 是 2000。 


色 和 蓝 


色 的 


色光 以 不 同 的 比例 相 加 ， 可 产生 多 


种 多 样 的 色光 。 一 一 译 者 注 


2000 


> typeof 2et+3; 
"number" 


此 外 ， 我 们 也 可 以 将 
也 就 能 被 理解 是 将 数字 2 


关 22eG=37 
0.002 


> 123.456E-3; 
0.123456 


> typeof 2e-3; 
"number" 


2.3.2.3 Infinity 


TT 


nl 
席 
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2e+3 理解 为 将 数字 2 的 小 数 点 向 右 移 三 位 。 依 照 同 理 ，2e-3 
的 小 数 点 左 移 三 位 。 


2e+3 一 2.0.0.0, 一 2000 
SRS 
二 25 

2e-3 > 0.0.0.2. 一 0.002 
NA 
2 


在 JavaScript 中 ， 还 有 一 种 叫做 Infinity 的 特殊 值 。 它 所 代表 的 是 超出 了 JavaScript 处 


Infinity。 当 我 们 输入 1 
践 证 明 ,JavaScript 所 能 处 理 


> TNELNnTEty 
Infinity 


> typeof Infinity; 
"number" 


> le309; 
Infinity 


> 1e308; 
le+308 


另外， 任何 数 除 以 0 结 


时 范围 的 数值 。 但 Infinity 依然 是 一 个 数字 ， 我 们 可 以 在 控 秆 


i 


台 使 用 typeof 来 测试 
e308 时 ， 一 切 正常 ， 但 一 旦 将 后 面 的 308 改 成 309 就 出 界 了 。 实 
的 最 大 值 是 1.7976931348623157e+308, 而 最 小 值 为 5e-324。 


结果 也 为 Infinity: 
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> var a=6/ 0; 
> a; 
Infinity 


Infinity 表示 的 是 最 大 数 ( 或 者 比 最 大 数 还 要 大 的 数 )， 那 


答案 是 在 Infinity 之 前 加 一 个 负 号 : 


> var i = -Infinity; 
> 
-Infinity 


> typeof i; 
"number" 


么 最 小 数 该 如 何 表示 呢 ? 


这 是 不 是 意味 着 我 们 可 以 得 到 双 倍 的 Infinity 呢 ? 一 一 毕竟 我 们 可 以 从 0 加 到 


Infinity, 也 可 以 从 0 减 到 -Infinity。 事 实 上 这 是 不 可 能 的 , 因 


为 即便 将 正 负 Infinity 


相 加 ， 我 们 也 不 会 得 到 0， 而 是 会 得 到 一 个 叫做 NaN (Not A Number 的 缩写 ， 即 不 是 数字 ) 


> "TE LNTtY -= "INET 
NaN 


> -Infinity + Infinity; 
NaN 


男 外 ，Infinity 与 其 他 任何 操作 数 执 行 任何 全 


六 ,工科 下 二 入 二 臣 光 人 二 2 人 
Infinity 


> 
-Infinity 


> 2 学 
Infinity 


> TNEiNLtYyY = 9999999999999999.97 
Infinity 


2.3.2.4 NaN 


还 记得 之 前 见 过 的 那个 NaN 吗 ? 尽管 该 值 的 名 字 叫 做 “不 是 数 


术 运 算 的 结果 也 都 等 


THEinitys 


” 但 事实 上 它 依然 


TT 


nl 
席 
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> typeof NaN; 
"number" 


> var a = NaN; 
> a; 
NaN 


如 果 我 们 在 算术 运算 中 使 用 了 不 恰当 的 的 操作 数 ， 导 致 运算 失败 ， 该 运算 就 会 返回 
NaN。 例 如 当 我 们 试图 让 数字 10 与 字符 "f" 相 乘 时 ， 结 果 就 会 为 NaN， 因 为 "f" 显 然 是 不 
支持 乘法 运算 的 。 


为 和 0 
> 
NaN 


而 且 NaN 是 有 传染 性 的 ， 只 要 我 们 的 算术 运算 中 存在 一 个 NaN， 整 个 运算 就 会 失败 。 


>1+ 2 + NaN; 
NaN 


2.3.3 ”字符 串 


字符 串通 常 指 的 是 某 段 用 于 表示 文本 的 字符 序列 。 在 JavaScript 中 ， 一 对 双 引 号 或 单 
引号 之 间 的 任何 值 都 会 被 视 为 一 个 字符 串 。 也 就 是 说 ， 如 果 说 1 是 一 个 数字 的 话 ， 那 么 "1" 
就 是 一 个 字符 串 了 。 在 一 个 字符 串 前 使 用 typeof 操作 符 会 返回 "stri ng"。 


> Var s = "some characters"; 

> typeof s; 

"string" 

> Var s = 'some characters and numbers 123 5.87') 


> typeof s; 
"string" 


字符 串 中 可 以 包含 数字 ， 例 如 : 
> Var s = "1') 

> typeof s; 

"string" 
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如 果 引 号 之 间 没 有 任何 东西 ， 它 所 表示 的 依然 是 一 个 字符 串 〈 即 空 字符 串 ): 


> Var s = ""; typeof s; 
"string" 


说 
人 
| 
人 
Ee 
Tn 
Ud 


在 上 一 小 节 ， 当 我 们 在 两 个 数字 之 间 使 用 加 号 时 ， 所 执行 的 是 加 法 运算 。 
中 ， 这 是 一 个 字符 串 拼 接 操 作 ， 它 返回 的 是 两 个 字符 串 拼 接 之 后 的 结果 。 例 如 ; 


> Var sl = "web"; 
> Var s2 = "site"; 
> var s = sl + s2; 
> 

"website" 


> typeof s; 
"string" 


像 + 这 样 的 双 功 能 操作 符 可 能 会 带 来 一 些 错误 。 因 此 ， 我 们 如 果 想 执行 拼接 操作 
的 话 ， 最 好 确保 其 所 有 的 操作 数 都 是 字符 串 。 同 样 地 ， 在 执行 数字 相 加 时 ， 我 们 也 要 
确保 其 所 有 的 操作 数 都 是 数字 。 至 于 如 何 做 到 这 一 点 ， 我 们 将 会 在 后 续 章 节 中 详 允 


讨论 。 
2.3.3.1 字符 串 转换 


当 我 们 将 一 个 数字 字符 串 用 于 算术 运算 中 的 操作 数 时 ， 该 字符 串 会 在 运算 中 被 当做 数 
字 类 型 来 使 用 。( 由 于 加 法 操作 符 的 歧义 性 ， 这 条 规则 不 适用 于 加 法 运算 。) 


> Var s = "1') 
> 

> typeof s; 
"number" 


> Var s = "1') 
> 

> typeof s; 
"number" 


tr 


nl 
储 
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于 是 ， 将 数字 字符 串 转换 为 数字 就 有 了 一 种 偷懒 的 方法 : 只 需 将 该 字符 串 与 1 相 乘 


即 可 。( 当 然 ， 更 好 的 选择 是 调用 parseInt () 函数 ， 关 于 这 点 ， 我 们 将 会 在 下 一 章 中 
介绍 。) 


> var s = "100";typeof s; 


"string" 


> typeof s; 
"number" 


如 果 转 换 操 作 失 败 了 ， 我 们 就 会 得 到 一 个 NaN 值 。 


> Var movie = '101 dalmatians'; 
> MOYIe 1 


NaN 


此 外 ， 将 其 他 类 型 转换 为 字符 串 也 有 一 种 偷懒 的 方法 ， 只 需要 将 其 与 空 字 符 串 相 加 


| 


> 
> typeof n; 
"number" 


>» Te VT 


"1" 


> typeof n; 


"string" 


2.3.3.2 ”特殊 字符 串 
在 表 2-2 中 ， 我 们 列 出 了 一 些 具 有 特殊 含义 的 字符 串 。 
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表 2-2 
字符 串 含义 示例 
> Var s = 'I don't know'; 
这 样 做 是 错误 的 ， 因 为 JavaScript 会 将 “I don” 
Ee 视 为 字符 串 ， 而 其 余部 分 则 将 会 被 视 为 无 效 代 
当 我 们 想 要 在 字符 捉 中 使 用 引号 时 ， 就 | 码 。 正 确 做 法 如 下 : 
\ 必须 天 门 进 行 转 义 ， 这 样 JavaScript 
人 必须 对 它们 进行 转 义 ， 这 相 a > Var .se "LE -dOn\t know" 
上 才 不 会 将 其 认 作 字 符 串 的 终止 符 > var s = "I qonN't know' 
让 同 理 ， 当 我 们 需要 在 字符 串 中 使 用 反 和 斜 > var s = "I don't know"; 
线 本 身 时 ， 也 需要 用 另 一 个 反 斜 线 对 上 Re 
攻 > var s = "\"Hello\", he 
进行 转 义 Sa 
转 义 转 义 字符 本 身 ; 
> 二 上 SNN272 37 
TIN2r 
> var s = 'NXnlNAn2Nxn3Nn'7 
> 8 
un 换行 符 
以 下 所 有 语句 : 
®>vars='l\2'; 
®>vars='ln\r2'; 
®>vars='l\r\n2'; 
在 Ai 
下 在 付 结果 都 为 : 
> $83 
TE 
过 下 
> var s = "1\t2" 
At 制 表 符 2 
外 公开 


MA 
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续 表 
字符 串 含义 示例 
下 面 是 作者 的 名 字 在 保加利亚 语 中 用 西里 尔 字 
母 的 拼写 : 
\u \u 后 面 的 字符 将 会 被 视 为 Unicode 三 > "\u0421\u0442\u043E\u044F 


除 此 之 外 ， 还 有 一 些 


一 SN 


( 换 页 符 ) 等 。 
2.3.4 布尔 值 


布尔 类 型 中 只 有 两 种 值 : true 和 false。 它 们 使 用 时 不 需 加 引号 。 


> Var b = true; 
> typeof b; 
"boolean" 

> Var b = false; 
> typeof b; 
"boolean" 


如 果 true 或 false 在 引号 内 ， 


恨 少 被 使 用 的 特殊 字符 ， 


它 就 是 一 个 字符 串 。 


\u043D"; 


"CTOFAH" 


例如 : \b〔( 退 格 符 )、\v〔 纵 向 制 表 符 )、\f 


> Var b = "true"; 

> typeof b; 

"string" 

2.3.4.1 ”逻辑 运算 符 

JavaScript 中 有 三 种 逻辑 运算 符 ， 它 们 都 属于 布尔 运算 。 分 别 是 : 
4 ! 一 -逻辑 非 〈《 取 反 )， 

令 ” && 一 一 逻辑 与 ; 

$ | 一 一 逻辑 或 。 


在 JavaScript 中 ， 如 果 我 们 想 描 


述 某 事物 的 非 真 状态 ， 就 可 以 考虑 使 用 逻辑 非 运 
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人 
> 
false 


Ys 


!true; 


而 如 果 我 们 对 true 执行 两 次 逻辑 非 运 算 的 话 ， 其 结果 应 该 就 等 于 原 值 : 


> var 
1D 
true 


如 果 我 们 对 一 个 非 布 尔 值 执 行 逻辑 运算 , 那么 该 值 就 会 在 计算 过 程 中 被 转换 为 布尔 值 : 


> var 
> 二 6 
false 


所 和 


by 


!!Itrue; 


MOme ms 


如 您 所 见 ， 上 例 中 的 字符 串 "one" 是 先 被 转换 为 布尔 值 true 然后 再 取 反 的 ， 结 果 为 
false。 如 果 我 们 对 它 取 反 两 次 ， 结 果 就 会 为 true 。 例 如 : 


> var 
小 
true 


型 的 值 转换 为 
为 false)， 


ee 


了 


S $$ 4 9 


ULL 


"Ome™s 


借助 双重 取 反 操作 ， 我 们 可 以 很 轻易 地 将 任何 值 转换 为 相应 的 布尔 值 。 理 解 各 种 类 
相应 布尔 值 的 规则 非常 重要 。 除 了 下 面 所 列 出 特定 值 以 外 (它们 将 被 转换 
内 余 大 部 分 值 在 转换 为 布尔 值 时 都 为 true。 


pr 广 全 
Vv 


空 字 符 串 几 。 


undefined。 
数字 0。 


数字 NaN。 


令 ”布尔 值 false。 
这 6 个 值 有 时 也 会 被 我 们 称 为 falsy 值 ， 而 其 他 值 则 被 称 为 truthy 值 (包括 字符 串 "0"、 


1 1 


"false' 


' 等 )。 


接 下 来 ， 让 我 们 来 看 看 男 外 两 个 操作 符 一 一 逻辑 与 (&&&) 和 他 辑 或 (||) 的 使 用 示例 。 
当 我 们 使 用 && 操 作 符 时 ， 当 且 仅 当 该 操作 所 有 操作 数 为 true 时 ， 操 作 结果 才 为 true。 


确 一 下 操作 顺序 。 例 如 : 


> false && false 
true 


> false && (false 
false 


|| true && true; 


|| true) && true; 
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而 | 操作 则 只 需要 其 中 一 个 操作 数 为 true， 操 作 结 果 即 为 true。 

> var bl = true, b2 = false; 

BL 2 

true 

> bl && b2; 

false 

在 表 2-3 中 ,我们 列 出 了 所 有 可 能 的 情况 及 其 相应 结果 。 

表 2-3 

操作 结果 

true && true true 
true && false false 
false && true false 
false && false false 
七 区 让 全 中 由 二 EUS true 
true || false true 
false || true true 
false || false false 

当然 ， 我 们 也 能 连续 执行 若干 个 逻辑 操作 。 例 如 : 

> true && true && false && true; 

false 

> false || true || false; 

true 

我 们 还 可 以 在 同一 个 表达 式 中 混合 使 用 && 和 ||。 不 过 在 这 种 情况 下 ， 最 好 用 括号 来 明 
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2.3.4.2 ”操作 符 优先 级 


您 可 能 会 想 知道 ， 为 什么 上 例 中 的 第 一 个 表达 式 (false && false || true && 
true) 结果 为 true。 答 案 在 于 操作 符 优 先 级 。 这 看 上 去 有 点 像 数 学 ， 例 如 : 


>1+2* 3; 
7 


由 于 乘法 运算 的 优先 级 高 于 加 法 ， 所 以 该 表达 式 会 先 计算 2 * 3， 这 就 相当 于 我 们 输 
入 的 表达 式 是 : 


SE 


逻辑 运算 符 也 一 样 , ! 的 优先 级 最 高 , 因此 在 没有 括号 限定 的 情况 下 它 将 会 被 最 先 执行 。 
接 下 来 的 优先 顺序 是 &&&， 最 后 才 是 |。 也 就 是 说 : 


> false && false || true && true; 
true 
与 下 面 表达 式 等 效 : 
> (false && false) || (true && true); 
true 
最 佳 实践 : 
你 、 尽量 使 用 括号 ,而 不 是 依靠 操作 符 优先 级 来 设 定 代 


码 的 执行 顺序 ， 这 样 我 们 的 代码 才能 有 更 好 的 可 读 性 。 


尽管 ECMAScript 标准 的 确 对 运算 符 的 优先 级 做 了 相应 的 定义 ， 而 且 记 住所 有 运 
算 符 的 优先 级 也 算是 一 种 很 好 的 脑力 练习 ， 但 本 书 并 不 打算 提供 这 个 优先 级 列表 。 因 
为 首先 ， 就 算 您 记 住 了 这 些 顺序 ， 以 后 也 有 可 能 会 忘记 。 其 次 ， 即 使 您 永远 不 会 忘记 ， 
您 也 不 应 该 依赖 它 ， 因 为 别人 不 一 定 会 记得 ， 这 样 做 会 给 他 们 的 代码 阅读 与 维护 带 来 
困难 。 


2.3.4.3 ”惰性 求 值 

如 果 在 一 个 连续 的 逻辑 操作 中 ， 操 作 结 果 在 最 后 一 个 操作 完成 之 前 就 已 经 明确 了 的 话 ， 
那么 该 操作 往往 就 不 必 再 继续 执行 了 ， 因 为 这 已 经 不 会 对 最 终结 果 产 生 任 何 影响 。 例 如 ， 
在 下 面 这 种 情况 中 : 
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> true || false || true || false || true; 
true 


在 这 里 ， 所 有 的 逻辑 或 运算 符 优先 级 都 是 相同 的 ， 只 要 其 中 任何 一 个 操作 数 为 true， 
该 表达 式 的 结果 就 为 true。 因 而 当 第 一 个 操作 数 被 求 值 之 后 ， 无 论 后 面 的 值 是 什么 ， 结 
果 都 已 经 被 确定 了 。 于 是 我 们 可 以 允许 JavaScript 引擎 偷 个 懒 〈 好 吧 ， 这 也 是 为 了 提高 效 
率 )， 在 不 影响 最 终结 果 的 情况 下 省 略 一 些 不 必要 的 求 值 操作 。 为 此 ， 我 们 可 以 在 控制 台中 
做 个 实验 : 


> Var b = 5; 

> true || (b = 6); 
true 

> Ds 

> true && (b = 6); 


6 


> 过 


除 此 之 外 ， 上 面 的 例子 还 向 我 们 显示 了 男 一 个 有 趣 的 事情 一 一 如 果 JavaScript 引擎 在 
一 个 逻辑 表达 式 中 遇 到 一 个 非 布 尔 类 型 的 操作 数 ， 那 么 该 操作 数 的 值 就 会 成 为 该 表达 式 所 
返回 的 结果 。 例 如 : 


> true || "Something"; 
true 


> true && "something"; 
"something" 


> true && something && true; 
true 


通常 情况 下 ， 这 种 行为 应 该 尽量 避免 ， 因 为 它 会 使 我 们 的 代码 变 得 难以 理解 。 但 在 
某 些 时 候 这 样 做 也 是 有 用 的 。 例 如 ， 当 我 们 不 能 确定 某 个 变量 是 否 已 经 被 定义 时 ， 就 可 
以 像 下 面 这 样 ， 即 如 果 变 量 mynumber 已 经 被 定义 了 ， 就 保留 其 原 有 值 ， 否 则 就 将 它 初 
台 化 为 10。 
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> Var mynumber = mynumber || 10; 
> mynumber; 
10 


这 种 做 法 简单 而 优雅 , 但 是 请 注意 ， 这 也 不 是 绝对 安全 的 。 如果 这 里 的 mynumber 之 前 
被 初始 化 为 0 (或 者 是 那 6 个 falsy 值 中 的 任何 一 个 )， 这 段 代码 就 不 太 可 能 如 我 们 所 愿 了 。 


> Var mynumber = 0; 

> Var mynumber = mynumber || 10; 
> mynumber; 

10 


2.3.4.4 ”比较 运算 符 


在 JavaScript 中 ， 还 有 另外 一 组 以 布尔 值 为 返回 值 类 型 的 操作 符 ， 即 比较 操作 符 。 下 
面 让 我 们 通过 表 2-4 来 了 解 一 下 它们 以 及 相关 的 示例 。 


表 2-4 
操作 符 操作 说 明 代码 示例 
相等 运算 符 ， ge 
true 
当 两 个 操作 数 相等 时 返回 true。 在 该 比较 操作 > 1 == 2; 
执行 之 前 ， 两 边 的 操作 数 会 被 自动 转换 为 相同 false 
类 型 ne 
true 
严格 相等 运算 符 : RE 
E30 当 且 仅 当 两 个 操作 数 的 值 和 类 型 都 相同 时 返 世 false 
true。 这 种 比较 往往 更 可 靠 ， 因 为 其 幕后 不 右 二 
在 任何 形式 的 类 型 转换 ee 
>1 1!= 1;; 
不 相等 运算 符 : false 
上 当 两 个 操作 数 不 相 等 时 返回 true (存在 类 型 转 人 
false 
换 ) > 1 1!= '2' 
true 
严格 不 相等 运算 符 : ee 
pS K false 
:一 此 操作 内 不 允许 类 型 转换 。 且 当 两 个 操作 数 的 ere 
值 或 类 型 不 相等 时 返回 true true 


A 
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操作 符 操作 说 明 代码 示例 

> 

> 当 且 仅 当 左 操作 数 大 于 右 操作 数 时 返回 true 
> 33. > 227 
true 

当 且 仅 当 左 操作 数 大 于 或 等 于 右 操作 数 时 返回 Ee 

true true 
> 

< 当 且 仅 当 左 操作 数 小 于 右 操 作 数 时 返回 true 
true 
> 1 <= 1; 

当 且 仅 当 左 操作 数 小 于 或 等 于 右 操作 数 时 返回 tie 

true > 1 <= 2;，; 
true 


还 有 一 件 有 趣 的 事情 要 提醒 读者 注意 : NaN 不 等 于 任何 东西 ， 包 括 它 自己 。 


> NaN == NaN; 
false 


2.3.5 undefined 与 null 


当 我 们 尝试 使 用 一 个 不 存在 的 变量 时 ， 控 制 台 中 就 会 产生 以 下 错误 信息 : 


> oleh 
ReferenceError: foo is not defined 


但 当 对 不 存在 的 变量 使 用 typeof 操作 符 时 则 不 会 出 现 这 样 的 错误 ， 而 是 会 返回 一 个 
字符 串 "undefined"。 


> typeof foo; 
"undefined" 


四 册 
mm 
< 下 


如 果 我 们 在 声明 一 个 变量 时 没有 对 其 进行 赋值 , 调用 该 变 
操作 符 依然 会 返回 "undefined": 


并 不 会 出 错 , 但 typeof 


> Var somevar; 

> somevar; 

> typeof somevar; 
"undefined" 
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这 是 因为 当 我 们 声明 而 不 初始 化 一 个 变量 时 ，JavaScript 会 自动 使 用 undefined 值 来 
初始 化 这 个 变量 。 


> Var somevar; 


> somevar === undefined; 


true 


我 们 的 代码 


但 null 值 就 完全 是 另 一 回 事 了 。 它 不 能 由 JavaScript 自动 赋值 ， 只 能 交 
> Var somevar = null; 


null 


> somevar; 
null 


> typeof somevar; 
"object" 


TS 


尽管 undefineqd 和 null 之 间 的 差别 微乎其微 ， 但 有 时 候 也 很 重要 。 例 如 ， 当 我 们 


对 其 分 别 执行 某 种 算术 运算 时 ， 结 果 就 会 截然 不 同 : 


> var i = 1 + undefined; 


> 


> YAEL 


这 是 因为 null 和 undefined 在 被 转换 为 其 他 基本 类 型 时 ， 方 法 存在 一 定 的 区 别 ， 
下 面 我 们 给 出 一 些 可 能 的 转换 类 型 。 
转换 成 数字 : 


> 1 *undefined; 
NaN 


> 党 而 让 二 下 
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令 ”转换 成 布尔 值 : 


> !lIundefined; 


false 

> !linull; 

false 

4 转换 成 字符 中 

> "Value: "+ null; 
"value: null" 

> "value: " + undefined; 
"value: undefined" 


2.4 基本 数据 类 型 综述 


现在 ， 让 我 们 来 快速 汇总 一 下 目前 为 止 所 讨论 过 的 内 容 。 
令 ”JavaScript 语言 中 有 五 大 基本 数据 类 型 : 


数字 ; 
字符 申 ; 
布尔 值 ; 


Undefined; 


null。 


令 ”任何 不 属于 基本 类 型 的 东西 都 属于 对 象 。 


令 数字 类 型 可 以 存储 的 数据 包括 : 正 负 整数 、 浮 点 数 、 十 六 进 秆 


数 以 及 特殊 数值 NaN、Infinity、-Infinity。 
人 字符 串 类 型 存储 的 是 一 对 引号 之 间 的 所 有 字符 。 


布尔 类 型 的 值 只 有 两 个 : true 和 false。 


令 null 类 


型 的 值 只 有 一 个 : null。 


TT 


nl 
席 
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令 ”undefined 类 型 的 值 只 有 一 个 : undefined。 


令 ” 绝 大 部 分 值 在 转换 为 布尔 类 型 时 都 为 true， 但 以 下 6 种 falsy 值 除外 : 


LL 
3 


null; 
undefined; 
0; 

NaN; 


false。 


2.5 ”数组 


现在 ， 我 们 对 JavaScript 中 的 基本 数据 类 型 已 经 有 了 一 定 的 了 解 ， 是 时 候 将 注意 力 转 
向 更 有 趣 的 数据 结构 


那么 究 竞 什么 是 数组 呢 ? 简 而 言 之 ， 它 就 是 一 个 用 于 存储 数据 的 列表 。 与 一 次 只 能 存 


数组 了 。 


中 


储 一 个 数据 的 变量 不 同 ， 我 们 可 以 用 数组 来 存储 任意 数量 的 元 素 值 。 


> var a 


我 们 可 以 用 一 对 不 带 任 何 内 容 的 方 括 号 来 声明 一 个 空 数组 变量 ， 例 如 : 


3 


如 果 我 们 想 要 定义 一 个 带 三 个 元 素 的 数组 ， 则 可 以 这 样 做 : 


> 没 


并 
问 
任 
本 


= [1,2,3]; 


台中 输入 相应 的 数组 名 ， 就 能 打印 出 该 数组 中 的 所 有 内 容 : 


> 
[1, 2, 3] 
现在 的 问题 是 , 我 们 应 该 如 何 访问 数组 中 的 各 个 数据 元 素 呢 ? 通常 , 元 素 在 数组 中 的 


索引 位 置 ( 下 标 〉 是 从 0 开始 编号 的 。 也 就 是 说 ， 数 组 首 元 素 的 索引 值 〈 或 者 说 位 置 值 ) 


应 该 是 0， 第 二 个 元 素 的 索引 值 则 是 1， 以 此 类 推 。 表 2-5 中 所 显示 的 就 是 之 月 


数组 实例 中 的 


和 那个 三 元 素 


\ 体 情况 。 
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1 


2 


3 


为 了 访问 特定 的 数组 元 素 ， 我 们 需要 用 一 对 方 括号 来 指定 元 素 的 索引 值 。 因 此 a[0] 所 


访问 的 就 是 数组 a 的 首 元 素 ， 而 a[1] 则 代表 第 二 个 元 素 ， 以 此 类 推 。 


> 
1 


> a[lll; 
2 


2.5.1 增加、 更 新 数组 元 素 


素 


我 们 可 以 通过 索引 来 更 新 数组 中 的 元 素 。 例 如 在 下 面 的 代码 中 ， 我 们 更 新 了 第 三 个 元 


《索引 值 为 2) 的 值 ， 并 将 更 新 后 的 数组 打印 出 来 : 
> a[2] = 'three'; 

"three" 

> a; 


[1, 2, "three"] 


另外 ， 我 们 也 可 以 通过 索引 一 个 之 前 不 存在 的 位 置 ， 来 为 其 添加 更 多 的 数组 元 素 。 


> a[3] = 'four'; 
mm four wm 


> 沁 
[1, 2, "three", "four"] 


如 果 新 元 素 被 添加 的 位 置 与 原 数组 末端 之 间 存 在 一 定 的 间隔 ， 那 么 这 之 间 的 元 素 将 会 


自动 设 定 为 undqefined 值 。 例 如 : 
> ar ae [L231 
> a[6] = 'new'; 


"new" 


44 JavaScript 面向 对 象 编程 指南 (第 2 版 ) 


> 
[1, 2, 3, undefined x 3, "new"] 


2.5.2 ”删除 元 素 


为 了 删除 特定 的 元 素 ， 我 们 需要 用 到 delete 操作 符 。 然 而 ， 相 关 元 素 被 删除 后 ， 原 


数组 的 长 度 并 不 会 受到 影响 。 从 某 种 意义 上 来 说 ， 该 元 素 被 删除 的 位 置 只 是 被 留 空 了 而 已 。 


> eB I 
> delete alll; 

true 

> a; 


[1, undefined, 3] 


> typeof alll]; 
"undefined" 


2.5.3 ”数组 的 数组 


我 们 可 以 在 数组 中 存放 任何 类 型 的 值 ， 当 然 也 包括 另 一 个 数组 。 
> var a = [1，"two" false, null, undefined]; 

> a; 

[1, "two", false, null, undefined] 


> a[5] = [1,2,3]; 
[1, 2, 3] 


> 
[1, "two", false, null, undefined, Array[3]] 


如 果 我 们 用 鼠标 单 击 控 制 台 内 结果 里 的 Array[3] ， 这 个 数组 的 值 就 会 被 展开 。 下 面 
我 们 再 来 看 另 一 个 例子 ， 这 里 定义 了 一 个 含有 两 个 数组 的 数组 : 


> [ly2r3ls [L4576] |] 
3 这 7 
[Array[3],RArray[3] ] 


在 该 数组 中 ， 首 元 素 a[0] 本 身 也 是 一 个 数组 。 


> 可 
[1, 2, 3] 


所 以 如 果 想 要 访问 内 层 数组 中 的 特定 元 素 ， 我 们 就 得 要 再 加 一 组 方 插 号。 例如 : 
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> a[ll] [2]; 
6 


值得 注意 的 是 , 我 们 也 可 以 通过 这 种 数组 访问 方式 来 获取 字符 串 中 特定 位 置 上 的 字符 。 


、 尽管 用 数组 方式 访问 字符 串 在 很 久 前 就 已 经 被 许 
多 浏览 器 支持 (除了 旧版 本 的 更 ), 但 直到 ECMAScript 
5 才 被 官方 正式 承认 为 标准 的 一 部 分 。 


除 此 之 外 ， 数 组 的 使 用 方法 还 有 很 多 (我 们 将 会 在 第 4 章 : 对 象 中 详细 介绍 )， 现 在 先 
到 此 为 止 ， 请 记 住 以 下 内 容 。 


令 ” 数 组 是 一 种 数据 存储 形式 。 

数组 元 素 是 可 以 被 索引 的 。 

数组 中 的 元 素 索 引 是 从 0 开始 的 ， 并 且 按 照 每 个 元 素 的 位 置 依次 递增 。 
我 们 是 通过 方 括号 中 的 索引 值 来 访问 数组 元 素 的 。 

数组 能 存储 任何 类 型 的 数据 ， 包 括 另 一 个 数组 。 


2.6 条 件 与 循环 


条 件 表达 式 是 一 种 简单 而 强大 的 控制 形式 ， 它 能 够 帮助 我 们 控制 一 小 段 代 码 的 执行 走向 。 
而 循环 则 是 一 种 可 以 让 我 们 重复 执行 某 段 代码 的 操作 。 接 下 来 ， 我 们 将 会 学 习 以 下 内 容 。 


令 if 条 件 表达 式 。 


NN 


全 8@ 9 
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令 switch 语句 。 
售 whnile、do-while、for， 以 及 for-in 循环 。 
下 一 小 节 中 的 例子 需要 我 们 在 Firebug 控制 台中 打开 


多 行 输入 功能 。 在 WebKit 控制 台中 ， 也 可 以 通过 Shift+ 
Enter 来 输入 新 行 。 


2.6.1 让 条 件 表达 式 


让 我 们 先 来 看 一 个 简单 的 过 条 件 表达 式 : 


Var result = '', a = 3; 
io I = > 二 
result = "a is greater than 2'， 


} 

如 您 所 见 ， 该 表达 式 通 常 主要 由 以 下 几 个 部 分 组 成 : 

令 if 语句。 

令 ” 括 号 中 的 条 件 部 分 一 一 判断 “a 是 否 大 于 2”。 

信 ” 被 包含 在 人 } 内 的 代码 块 ， 这 是 当 计 条 件 满足 时 该 程序 所 要 执行 的 部 分 。 


其 中 ， 条 件 部 分 〈 即 括号 内 的 部 分 ) 通常 由 茶 些 返回 布尔 值 的 操作 组 成 ， 主 要 有 以 下 
几 种 形式 : 


令 ”人 逻辑 类 操作 ， 包 括 !、g&、|| 等 。 
4 比较 类 操作 ， 包 括 = 一 、!=、> 等 。 
令 一 个 可 以 转换 为 布尔 类 型 的 值 或 变量 。 
令 ”以 上 儿 种 形式 的 组 合 。 
2.6.2 else 语句 


除 此 之 外 ，if 表达 式 中 还 可 以 有 一 个 可 选项 ， 即 else。 如 果 条 件 部 分 的 表达 式 返 回 
false 的 话 ， 我 们 也 可 以 执行 后 面 else 子 句 中 的 代码 块 。 例 如 : 


i Se > 渤 


result = 'a is greater than 2') 


} else { 


TT 


nl 
席 
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result = 'a is NOT greater than 2I7 


} 


而 且 ， 我 们 还 可 以 在 if 和 else 之 间 插 入 任意 个 else if 子 句 。 例 如 : 


if (a>2 |1|1a< -2) { 
result = 'a is not between -2 and 2'， 
} else if (a === 0 && b === 0) { 
result = 'both a and b are zeros'; 
} else if (a === b) { 
result = 'a and b are equal'; 
} else { 
result = 'I give up'; 


} 
另外， 我 们 也 可 以 在 当前 的 站 代码 块 中 再 内 骨 一 个 新 的 条 件 语句 。 


if (a === 1) { 
if (b === 2) { 
result = 'a is 1 and b is 2I; 
} else { 
result = 'a is 1 but b is definitery not 2') 
} 
} else { 
result = 'a is not 1, no idea about b'; 


} 
2.6.3 ”代码 块 
在 前 几 个 例子 中 ， 我 们 实际 上 已 经 使 用 了 代码 块 。 首 先 ， 我 们 需要 先 了 解 一 下 什么 是 
代码 块 ， 因 为 这 东西 在 条 件 表达 式 和 循环 体 中 是 随处 可 见 的 。 
所 谓 的 代码 块 , 实际 上 指 的 是 被 包括 在 大 括号 中 的 、 由 0 个 或 多 个 表达 式 组 成 的 一 段 代 码 。 
{ 


和 信 中 -人 导 


var b 


并且 每 个 代码 块 中 都 还 可 以 再 内 嵌 男 一 个 代码 块 : 


Var a= 1; 
Var b = 3; 


Var c, dd; 
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最 佳 实践 : 


信 尽量 使 用 分 号 来 作为 每 一 行 的 结束 。 尽 管 这 在 语法 
上 是 可 选 的 ， 但 对 于 开发 来 说 是 一 个 很 好 的 习惯 。 
为 了 让 代码 获得 最 佳 的 可 读 性 ， 我 们 在 代码 块 中 的 
表达 式 最 好 是 一 行 一 个 ， 并 用 分 号 彼此 隔 开 。 


@ 尺 量 对 代码 块 中 的 所 有 代码 使 用 缩 进 格式 。 有 
些 人 会 用 Tab 来 做 缩 进 ， 而 有 些 则 会 使 用 四 个 
旭 或 两 个 空格 。 这 都 无 关 紧 要 ， 只 要 保持 前 后 一 
臻 就行。 在 上 面 那个 例子 中 ， 我 们 在 最 外 层 用 
了 两 个 空格 的 缩 进 ， 在 首 层 嵌 套 中 用 了 4 个 空 

格 ， 而 第 二 层 则 是 6 个 空格 . 


令 尽量 使 用 大 括号 。 当 代码 块 中 只 有 一 个 表达 式 时 ， 
大 括号 实际 上 是 可 选 的 ,但 为 了 增加 代码 的 可 读 性 
和 可 维护 性 ， 我 们 最 好 还 是 养 成 加 大 括号 的 习惯 ， 
即使 这 不 是 必需 的 。 


2.6.4 ”检查 变量 是 否 存 在 


下 面 让 我 们 来 实际 使 用 一 下 条 件 语句 。if 表达 式 在 检查 一 个 变量 是 否 存在 时 往往 非常 
有 用 。 其 中 ， 最 懒 的 方法 就 是 其 条 件 部 分 中 直接 使 用 变量 ,例如 if (somevar){....}。 
但 这 样 做 并 不 一 定 是 最 合适 的 。 我 们 可 以 来 测试 一 下 。 在 下 面 这 段 代码 中 ， 我 们 将 会 检查 程 
序 中 是 否 存在 一 个 叫做 somevar 的 变量 ， 如 果 存 在 ， 就 将 变量 result 设置 为 yes。 


> Var result = "'') 
> if (somevar)t{ 
result = 'yes'; 
} 


ReferenceError: somevar is not defined 


> result; 


LL 
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这 段 代 码 显然 是 起 作用 了 ， 
一 个 警告 信息 :“somevar is not 


代码 多 此 一 举 。 其 次 ， 就 算 i£( 


HT 


因为 最 终 的 结果 肯定 不 会 是 yes。 但 首先 ， 这 段 代 码 会 产 
defined”， 作 为 一 个 JavaScript 高 手 ， 您 肯定 不 会 希望 自己 的 
somevar) 返 回 的 是 false， 也 并 不 意味 着 somevar 就 一 定 


没有 定义 ， 它 也 可 以 是 任何 一 种 被 初始 化 为 falsy 值 (如 false 或 0) 的 已 声明 变量 。 
所 以 在 检查 变量 是 否 存 在 时 ， 更 好 的 选择 是 使 用 typeof。 


> Var result = "" 7; 


> if (typeof somevar |! 
result = 'yes'; 
} 


> result; 


wr 


在 这 种 情况 下 ，typeof i 


行 直接 比 对 。 但 需要 注意 的 是 ， 如 果 这 里 的 somevar 是 一 个 已 经 声明 但 尚未 赋值 的 变量 ， 
结果 也 是 相同 的 。 也 就 是 说 ， 我 们 实际 上 是 在 用 typeof 测试 一 个 变量 是 否 已 经 被 初始 化 


== "undefined"){ 


返回 的 是 一 个 字符 串 ， 这 样 就 可 以 与 字符 串 "undefineq" 进 


《或 者 说 测试 变量 值 是 否 为 undefined)。 


> Var somevar; 


> if (typeof somevar !== "undefined"){ 
result = 'yes'; 
} 
> result; 
mn 
> somevar = undefined; 
> if (typeof somevar !== "undefined"){ 


result = 'yes'; 


} 
> result; 


mn 


而 当 一 个 已 被 定义 的 变量 被 赋值 为 非 undefineg 的 任何 值 后 ， 该 变量 的 typeof 结 


果 就 不 再 是 undefined 了 。 


> somevar = 123; 


!== "undefined"){ 


> if (typeof somevar 
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result = 'yes';} 


2.6.4.1 ”替代 if 表达 式 


如 果 我 们 所 面 对 的 条 件 表达 式 非 常 简单 ， 就 可 以 考虑 用 其 他 形式 来 蔡 代 if 表达 式 。 
例如 下 面 这 段 代 码 ; 


Var aa = 1; 
Var result = "77 
if (a === 1) { 
result = "a is one"; 
} else { 
result = "a is not one"; 


} 
我 们 完全 可 以 将 其 简化 为 : 


> Var a= 1; 


> Var result = (a === 1) ? "a is one" : "a is not one"; 


但 需要 提醒 的 是 ， 这 种 语法 通常 只 用 于 一 些 非常 简单 的 条 件 逻 辑 ， 千 万 不 要 滥用 。 因 
为 这 样 做 很 容易 使 我 们 的 代码 变 得 难以 理解 。 以 下 是 一 个 滥用 的 例子 。 

假设 我 们 需要 判断 一 个 变量 是 否 在 某 个 区 间 《〈 例 如 从 50 到 100) 内。 如 变量 不 在 这 个 
区 间 ， 程 序 就 会 将 最 接近 当前 值 的 那个 区 间 边 界 赋 值 给 变量 。 

> Var a = 123; 

>a=a>100?3100 :a<50 ?50 : a; 


> 
100 


由 于 这 里 执行 了 两 次 ?: 操 作 ， 这 会 使 我 们 无 法 一 眼 判 断 表 达 式 的 运行 顺序 。 为 了 让 表 
达 式 显得 更 清晰 一 些 ， 我 们 最 好 还 是 在 其 中 加 入 一 些 括号 。 

> Var a = 123; 

>a= (a>100 ?3 100 :a< 50) ? 50 : a; 


> 
50 


> Var a = 123; 
L002 00 (0 B50 3 
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> a; 
100 
这 里 的 ? :操作 符 叫 做 三 元 运算 符 ， 因 为 它 需 要 三 个 操作 数 
2.6.4.2 switch 语句 
当 我 们 发 现 自己 在 if 表达 式 中 使 用 了 太 多 的 else if 子 句 时 ， 就 应 该 要 考虑 用 
switch 语句 来 奉 代 if 了 。 
Var a= !1'， 
var result = 0; 
Switch (a) { 
case 1: 
result = 'Number 1'， 
break; 
case '1': 
result = 'String 1 7 
break; 
default: 
result = “I donN't know™;y 
break; 
} 
显然 ， 这 上段 代码 的 执行 结果 为 "string 1"。 现 在 ， 让 我 们 来 看 看 switcnh 表达 式 主 
要 由 哪儿 部 分 组 成 。 
人 S switch 子 句 。 
令 ” 插 写 中 的 表达 式 。 它 通常 会 是 一 个 变量 , 但 也 可 以 是 其 他 任何 能 提供 返回 值 的 东西 。 
令 ”包含 在 大 括号 中 的 case 序列 块 。 
% 每 个 case 语句 后 面 有 一 个 表达 式 , 该 表达 式 的 结果 将 会 与 switch 语句 的 表达 式 进 
行 比 对 。 如 果 比 对 的 结果 为 true， 则 case 语句 中 冒号 之 后 的 代码 将 会 被 执行 。 
令 pbreak 语句 是 可 选 的 , 它 实 际 上 是 case 块 的 结束 符 ， 即 当 代码 执行 到 break 语 
句 时 ， 整 个 switch 语句 就 执行 完成 了 ， 否 则 就 继续 执行 下 一 个 case 块 。 
令 ”使 用 关键 字 default 标记 的 默认 条 件 代码 块 。 如 果 其 他 case 条 件 都 不 为 true 
的 话 ，default 条 件 就 会 被 执行 。 


换 句 话说 ， 整 个 switch 语句 的 执行 应 该 可 以 分 为 以 下 几 个 步骤 。 


1. 


对 switch 语句 后 面 的 括号 部 分 进行 求 值 ， 并 记录 结果 。 
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7. 


9 了 oh anN 


站 


移动 到 多 


pu 


如 果 步 又 2 


如 没有 遇 到 break 或 步骤 2 中 的 比 对 结果 为 faLse， 就 纪 


一 个 case 和 条件， 将 它 的 值 与 步骤 1 的 结果 进行 比 对 。 
FP 的 比 对 结果 为 true， 则 执行 该 case 块 中 的 代码 。 
在 相关 case 块 执行 完成 之 后 ， 如 果 遇 到 break 语句 就 直接 退出 switch。 


重复 步骤 2 到 5 中 的 操作 。 


如 果 依 然 还 没有 结束 《也 就 是 始终 未 能 按照 步 又 4 中 的 方式 退 


语句 后 面 的 代码 块 。 


最 佳 实践 


令 将 case 后 面 的 代码 相对 于 case 缩 进 。 当 然 您 
也 可 以 将 case 相对 于 switch 缩 进 ， 但 这 样 其 实 不 会 增加 
代码 的 可 读 性 。 


令 不 要 忘 了 break。 


令 有 时 候 ， 我 们 会 希望 故意 省 略 一 些 break 语句 ， 
当然 ， 这 种 叫做 贯穿 (fall-through ) 的 做 法 在 实际 应 用 中 
并 不 常见 ， 因 为 它 通常 会 被 误 认为 是 人 为 的 遗漏 。 故 而 使 
用 时 往往 需要 在 文档 中 加 以 说 明 。 但 从 另 一 方面 来 说 ， 如 
果 我 们 真 的 有 意 让 两 个 相 邻 的 case 语句 共享 同一 段 代 码 
的 话 ， 这 样 做 并 没有 什么 不 妥 。 只 不 过 ， 这 不 能 改变 相关 
的 规则 ， 即 如 果 执 行 代 码 是 写 在 case 语句 之 后 的 话 ， 它 依 
然 应 该 以 break 结尾 。 另 外 在 缩 进 方面 ，break 是 选择 
与 Case 对 齐 还 是 与 相关 的 代码 块 对 齐 ， 完 全 取决 于 个 人 
喜好 ， 只 要 保持 风格 的 一 致 性 即 可 。 


急 尺 量 使 用 default 语句 。 因 为 这 可 以 使 我 们 在 
Switch 找 不 到 任何 匹配 的 情况 下 ,也 依然 能 返回 一 些 有 意 
义 的 结果 。 


贱 续 下 一 个 case 块 。 


上 )， 就 执行 qdefault 
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2.6.5 ”循环 


通过 if-else 和 switch 语句 ， 我 们 可 以 在 代码 中 采取 不 同 的 执行 路 径 。 好 比 我 们 
处 于 十 字 路 口 时 ， 可 以 根据 某 个 有 具体 的 条 件 来 选择 自己 的 走向 。 然 而 ， 循 环 就 完全 是 另 一 
回 事 了 ， 我 们 可 以 利用 它 使 代码 在 返回 主 路 径 之 前 先 去 执行 某 些 重复 操作 。 至 于 重复 的 次 
数 ， 则 完全 取决 于 我 们 设 定 在 每 次 迭代 之 前 (或 之 后 〉 的 条 件 值 。 
比如 说 ,我们 的 程序 通常 都 是 在 A 点 到 B 点 之 间 运 行 ， 如 果 我 们 在 这 之 间 设 置 了 一 个 
条 件 C， 而 这 个 条 件 的 值 将 会 决定 我 们 是 否 要 进入 循环 L。 那 么 一 旦 进入 了 循环 ， 我 们 就 
必须 在 每 次 迭代 完成 之 后 对 该 条 件 进行 重新 求 值 ， 以 判断 是 否 要 执行 下 一 次 迭代 。 总 之 ， 
我 们 最 终 还 是 会 回 到 通 往 B 点 的 路 径 上 来 的 。 


oy 


A B 


当 菜 循环 的 条 件 永 为 true 时 ， 它 就 成 了 一 个 无 限 循环 。 这 意味 着 代码 将 会 被 “永远 ” 
困 在 循环 中 。 这 无 疑 是 一 个 逻辑 上 的 错误 ， 我 们 必须 对 此 加 以 防范 。 

在 JavaScript 中 ， 循 环 主要 有 以 下 四 种 类 型 : 

令 ” while 循环 ; 


令 do-while 循环 ; 

令 ”for 循环 ; 

信 ”for-in 循环 。 

2.6.5.1 ”while 循环 

while 循环 是 最 为 简单 的 一 种 循环 ， 它 们 通常 是 这 样 的 : 


Var i = 0; 
while (i < 10) { 
开赴 下 


} 


while 语句 主要 分 为 两 个 部 分 : 小 括号 中 的 条 件 和 大 括号 中 的 代码 块 。 当 且 仅 当 条 件 
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由 为 true 时 ， 代 码 块 才 会 被 反复 执行 。 
2.6.5.2 ”do-while 循环 


~ 


do-while 循环 实际 上 是 wnile 循环 的 一 种 轻微 的 变种 。 示 例如 下 : 


Var i = 0; 
do { 
和 于 太 学 
} while (i < 10)， 


在 这 里 ，qdo 语句 后 面 先 出 现 的 是 代码 块 ， 然 后 才 是 条 件 。 条 件 出 现在 代码 块 之 后 
意味 着 代码 块 无 论 如 何 都 会 被 执行 一 次 ， 然 后 再 去 对 条 件 部 分 进行 求 值 。 

如 果 我 们 将 上 面 两 个 示例 中 的 i 初始 化 为 11 而 不 是 0 的 话 ， 第 一 个 例子 while 循 
环 ) 中 ， 代 码 块 将 不 会 执行 ，i 最 终 的 值 仍然 是 11， 而 第 二 个 例子 (do-while 循环 ) 中 
的 代码 块 将 会 被 执行 一 次 ， i 的 值 也 会 变 为 12。 


这 


2.6.5.3 for 循环 


for 是 使 用 得 最 为 广泛 的 循环 类 型 ， 也 是 我 们 最 应 该 掌握 的 内 容 。 实 际 上 ， 这 也 只 需 
要 掌握 一 点 点 语法 知识 。 


在 条 件 C 和 代码 块 工 的 基础 上 ， 我 们 还 需要 增加 以 下 两 个 部 分 的 内 容 。 

令 ”初始 化 部 分 一 一 在 进入 循环 之 前 所 要 执行 的 代码 ( 即 图 中 0 所 标识 的 内 容 )。 

令 ” 自 增 部 分 一 一 每 次 迭代 完成 后 所 要 执行 的 代码 〈 即 图 中 + 所 标识 的 内 容 )。 

最 常用 的 for 循环 模式 主要 包括 以 下 内 容 。 

令 ”在 初始 化 部 分 中 ， 我 们 会 定义 一 个 循环 变量 (通常 命名 为 1 )， 例 如 var i = 0;。 
令 在 条 件 部 分 中 ， 我 们 会 将 i 与 循环 边界 值 进行 比 对 。 例 如 i < 100。 

令 ”在 自 增 部 分 中 ， 我 们 会 将 循环 变量 i 自 增 1， 如 i++。 

下 面 来 看 一 个 具体 示例 : 
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Var punishment = 777 
fOr (vast 二 0 1 < L002 it). 
punishment += "I will never do this again '; 


} 


实际 上 ， 这 三 个 部 分 〈 初 始 化 、 循 环 条 件 、 自 增 操作 ) 都 可 以 写成 用 逗号 分 割 的 多 重 
表达 式 。 例 如 ， 我 们 可 以 重 写 一 遍 上 面 的 例子 ,在 其 初始 化 部 分 中 增加 punishment 变量 
的 定义 。 


for (var i = 0, punishment = ''; i < 100; i++) { 


punishment += "I will never do this again '; 


} 


I 


> 


那么 ， 我 们 能 不 能 把 循环 体 中 的 内 容 移 到 自 增 部 分 中 去 呢 ? 当然 可 以 ， 尤 其 当 其 中 
有 一 行内 容 时 。 只 不 过 这 样 的 循环 看 上 去 有 点 令 人 乾 众 ， 因 为 它 没 有 循环 体 了 。 


正名 天 
var i = 0, punishment = (07; 
LOO 
i++, punishment += 'I will never do this again, '){ 


// nothing here 


} 


事实 上 ， 这 三 部 分 也 都 是 可 选 的 ， 上 面 的 例子 也 完全 可 以 写成 下 面 这 样 : 


Var i = 0, punishment = ! 7; 


for: (27) 4 


punishment += "I will never do this again '; 
if (++i == 100) { 
break; 


} 


尽管 代码 重 写 之 后 的 工作 方式 与 原来 相同 ， 但 它 显 得 更 长 ， 可 读 性 也 更 差 了。 我 们 也 
完全 可 以 用 while 循环 来 取代 它 。 但 for 循环 可 以 使 代码 更 紧凑 、 更 严谨 。 它 的 三 个 部 
分 “初始 化 、 循 环 条 件 、 自 增 操作 ) 泾 渭 分 明 ， 语 法 也 更 为 纯粹 。 这 些 都 有 利于 我 们 理 清 
程序 的 逻辑 ， 从 而 避免 类 似 于 无 限 循环 这 样 的 麻烦 。 
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另外 ，for 循环 还 可 以 彼此 嵌 套 。 下 面 ， 我 们 来 看 一 个 典 套 循环 的 具体 示例 。 假 设 该 
例 要 打印 一 个 10 行 10 列 的 星 号 字符 串 ，, 那么 我 们 就 可 以 用 i 来 表示 行 数 ，j 则 表示 列 数 ， 
以 构成 一 个 “图 形 ” 


Var res = '\n'; 
for(var i = 0; i < 10; i++) { 
fOF (Var J SyOW < LO 河村 二 和 


作 人 于 三 
SS T 1 。 

reSs+= '\n'; 
最 字符 串 输出 如 下 : 
最 终 ， 该 字符 串 输出 如 
Ls 
,| 
ht hh .sR 
bs ,3 
光 类 二 闭 ? "过 业 类 泊 
eh MS, J i i 
二 
‘A 完 守 
类 类 二 过 了 克 大 痪 一 此 
.TH I 
大 x* 大 大 光 7 * 大 大 


SN 


J = 
3 


我 们 还 可 以 用 质 环 和 取 模 运算 画 出 一 个 雪花 状 的 图 形 ， 代 码 如 下 : 


带 
央 


TT 


nl 
席 
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外 


2.6.5.4 _ forin 循环 


for-in 循环 往往 被 用 来 遍历 菜 个 数组 (或 对 象 ， 这 一 点 我 们 以 后 再 讨论 〉 中 的 元 素 。 
这 似乎 也 是 它 唯一 的 用 处 ， 该 循环 不 能 用 来 替代 for 或 while 循环 ， 执 行 某 些 一 般 性 的 
重复 操作 。 下 面 ， 我 们 来 看 一 个 for-in 遍历 数组 元 素 的 示例 。 当 然 ， 例 子 仅 供 参考 。 毕 
竟 对 于 for-in 循环 来 说 ， 它 最 适用 的 场合 依然 是 对 象 ， 以 及 用 于 常规 for 循环 的 数组 。 

在 下 面 的 示例 中 ， 我 们 将 遍历 数组 中 的 所 有 元 素 ， 并 打印 出 当前 所 在 的 索引 位 置 和 元 
素 值 。 


//example for information only 

// for-in loops are used for objects 
//regular for is better suited for arrays 
th i E va uve vey Tey Ty Va] 


Var result = '\n'，; 


for (var i in a) { 


result += indexs + + ValUue; [LT] 4 Nn; 
} 
结果 如 下 : 
wm 
index / Value: 


,， Value: 


0 
1 

index: 2, value: 
3, value: 
4 


wx* NUp 


,， Value: 
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index: 5, value: Zz 


nm 


2.7 注释 


现在 ， 我 们 来 看 本 章 最 后 一 个 内 容 : 注释 。 通 过 注释 这 种 形式 ， 我 们 可 以 将 自己 的 一 
些 想法 放 在 JavaScript 代码 中 。 由 于 注释 中 的 内 容 会 被 JavaScript 引擎 自动 忽略 掉 ， 因 此 它 
们 不 会 对 程序 产生 任何 影响 。 而 当 您 几 个 月 后 重新 考虑 这 段 代 码 ， 或 将 其 转让 给 其 他 人 维 
护 时 ， 这 些 注释 就 会 显得 非常 重要 。 
注释 的 形式 主要 有 以 下 两 种 。 
单行 注释 以 /开头 并 直至 该 行 结束 。 

多 行 注 释 以 Xx 开头， 并 以 */ 结 尾 ， 其 中 可 以 包括 一行 或 多 行内 容 。 但 要 记 住 ， 
注释 首尾 符 之 间 的 任何 代码 都 将 会 被 忽略 。 
具体 示例 如 下 : 


NVS 


// beginning of line 


var a = 1; // anywhere on the lin 


/* multi-line comment on a single line */ 


Wy 
comment that spans several lines 


沁 


Et 至 ， 有 些 实用 工具 《例如 JSDoc 及 YUIDoc) 可 以 从 我 们 的 代码 中 提取 相关 的 注释 ， 
并 据 此 生成 有 意义 的 项 目 文档 。 


2.8 本章 小 结 


在 这 一 章 中 ， 我 们 学 习 了 编写 一 个 JavaScript 程序 所 需要 的 基本 组 件 。 现 在 ， 您 应 该 
已 经 掌握 了 以 下 几 种 基本 数据 类 型 : 


入 
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tt 
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令 ”布尔 值 

@ undefined 

@ null 

您 也 已 经 了 解 了 一 些 基 本 的 操作 符 : 

令 ”算术 运算 符 : + 、-、*、/、%; 

信 ” 自 增 ( 减 ) 运算 符 ，++、 一 ; 

令 赋值 运算 符 : =、+=、 一 、*=、/ 王 、%=; 
9 特殊 操作 符 : typeof、delete:; 

令 ”逻辑 运算 符 : &&、|、!; 

4 比较 运算 符 : ==、 人 
令 ”三 元 运算 符 : ?:。 


另外 ， 我 们 还 学 习 了 如 何 使 用 数组 来 存储 和 访问 数据 。 最 后 ， 我 们 还 为 您 介绍 了 几 
不 同 的 控制 程序 流程 的 方法 一 一 条 件 (if-else 和 switch 语句 ) 和 循环 (while、 
do-while、for、for-in 语句 )。 

本 章 的 信息 量 确实 不 小 ， 因 此 我 们 建议 您 通过 下 面 的 练习 巩固 一 下 。 在 继续 深入 下 一 
章 的 学 习 之 前 ， 我 们 需要 给 自己 一 些 鼓 励 。 


2.9 练习 题 


1， 如 果 我 们 在 控 带 


ay 


台中 执行 下 列 语句 ， 结 果 分 别 是 什么 ? 为 什么 ? 


Var ay typeof a; 
Var Ss = 'ls'; S++7 
!!I"false"; 
!!undefined; 
typeof -Infinity; 
0 和 0 
undefined == null; 
false === "™"} 
typeof "2E+2"; 

a = 3et+3; a++， 
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2. 执行 下 面 的 语句 后 ，v 的 值 会 是 什么 ? 


> var v=vV || 10; 


如 果 将 v 分 别 设置 为 100、0、nul1l1， 结 果 又 将 是 什么 ? 


3. 编写 一 个 打印 乘法 口 雇 表 的 脚本 程序 。 提 示 : 使 用 网 套 循环 来 实现 。 


对 于 学 习 任 何 程序 设计 语言 


更 是 如 此 ,因为 该 语言 中 的 很 多 功能 


绝 大 部 


分 语言 


数 来 实现 面向 对 象 特 性 的 。 在 这 一 章 


看 到 


全 $$ SS 


刁 


可 


2 SY 9 


定义 和 使 月 


坚 “ 函 数 也 是 数 扩 
理解 了 上 述 内 
些 有 趣 
匿名 函数 的 调 


容 之 后 


口 ， 


的 函数 应 用 : 
用 ; 


口 


调 


国 数 ; 


即时 ( 自 
内 蔡 函 


调 ) 
数 〈 在 


区 
区 


函数 ; 
J 向 函数 传递 参数 ; 
坚 我 们 可 以 “免费 ”调用 哪些 预定 义 函数 ; 
笃 JavaScript 中 的 变量 作用 域 ; 


、 其 灵活 性 以 及 表达 能 力 都 来 自 函 


都 有 自己 专门 的 面向 对 象 的 语法 ， 而 JavaScript 没有 : 


中 ， 我 们 首先 要 掌握 如 下 内 容 : 


局 ”的 概念 ， 


数 ; 
数 内 部 定义 的 函数 ); 


我 们 束 可 以 继 缚 


并 将 函数 视 为 一 


' 特 殊 的 数据 类 型 


渎 深 入 本 章 的 第 二 部 分 。 在 这 一 


第 


3 章 


函数 


来 说 , 掌握 函数 都 是 非常 重要 的 。 对 于 JavaScript 


数 。 例 如 ， 


它 是 


世 
YEA 
o 


部 分 
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令 ”以 函数 为 返回 值 的 函数 ; 
令 能 重 定义 自身 的 函数 ; 
4 闭 包 。 


3.1 什么 是 函数 


所 谓 函 数 ， 本 质 上 有 是 一 种 代码 的 分 组 形式 。 我 们 可 以 通过 这 种 形式 赋予 某 组 代码 一 个 
名 字 ， 以 便于 之 后 的 调用 。 下 面 ， 我 们 来 示范 一 下 函数 的 声明 : 


function Sum(a b) { 
Var C= a+ pb; 
return c; 


} 
一 般 来 说 ， 函 数 声 明 通 常 由 以 下 几 部 分 组 成 。 
令 ”关键 词 function。 


令 ” 浮 数 名 称 ， 即 这 里 的 sum。 

令 函数 所 需 的 参数 ， 即 这 里 的 a、b 。 一 个 函数 通常 都 具有 0 个 或 多 个 参数 。 参 数 之 
间 用 去 号 分 隔 。 
函数 所 要 执行 的 代码 块 ， 我 们 称 之 为 函数 体 。 

令 ” return 子 句 。 函 数 通 常 都 会 有 返回 值 ， 如 果 某 个 函数 没有 显 式 的 返回 值 ， 我 们 
就 会 默认 它 的 返回 值 为 undefined。 

需要 注意 的 是 ， 一 个 函数 只 能 有 一 个 返回 值 ， 如 果 我 们 需要 同时 返回 多 个 值 ， 可 以 考 

虑 将 其 放 进 一 个 数组 里 ， 以 数组 元 素 的 形式 返回 。 
这 里 的 整个 语法 过 程 叫做 函数 声明 。 在 JavaScript 中 ， 函 数 声明 只 是 创建 函数 的 方法 


之 一 ， 之 后 我 们 会 介绍 其 他 方法 。 


3.1.1 调用 函数 


如 果 我 们 需要 使 用 一 个 函数 ， 就 必须 要 去 调用 它 。 调 用 的 方式 很 简单 ， 只 需 在 函数 名 
后 面 加 一 对 用 以 传递 参数 的 括号 即 可 。 另 外 ， 对 于 “调用 (to call)” 这 种 操作 ， 我 们 有 时 
也 可 以 将 其 称 之 为 “请 求 (to invoke)” 某 个 函数 。 


现在 ， 让 我 们 来 调用 一 下 sum () 函数 。 先 将 两 个 参数 传递 给 该 函数 ， 然 后 再 将 函数 的 
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返回 值 赋值 给 变量 result。 具 体 如 下 : 


> Var result = sum(1, 2); 
> result; 
3 


3.1.2 ”参数 


在 定义 一 个 函数 的 同时 ， 我 们 往往 会 设置 该 函数 所 需 的 调用 参数 。 当 然 ， 您 也 可 以 不 
给 它 设 定 参数 ， 但 如 果 您 设 定 了 ， 而 又 在 调用 时 忘 了 传递 相关 的 参数 值 ，JavaScript 引擎 就 
会 自动 将 其 设 定 为 undefined。 例 如 在 下 面 这 个 调用 中 ， 函 数 返回 的 是 NaN， 因 为 这 里 
试图 将 1 与 undqefined 相 加 。 


> sum(1); 
NaN 


从 技术 角度 来 说 ， 参 数 又 可 分 为 形 参 (形式 参数 ) 与 实 参 (实际 参数 ) 两 种 ， 但 我 们 
E 往 并 不 需要 严格 区 分 它们 。 形 参 是 指定 义 函 数 时 所 月 
函数 时 所 传递 的 那些 参数 。 考 虑 以 下 例子 。 


j 的 那些 参数 ， 而 实 参 则 指 的 是 在 调 


D 


> function sum(a, b){ 
return a + b; 
} 
> sum(1, 2); 


在 这 里 ，a 和 ob 是 形 参 ， 而 1 和 2 是 实 参 。 


对 于 那些 已 经 传递 进来 的 参数 ，JavaScript 是 来 者 不 拒 的 。 但 是 ， 即 便 我 们 向 sumgO 传 
弟 再 多 的 参数 ， 多 余 的 那 部 分 也 只 会 被 默默 地 忽略 掉 。 


> (dy Dr DAD) 
3 


实际 上 ， 我 们 还 可 以 创建 一 些 在 参数 数量 方面 更 为 灵活 的 函数 。 这 得 益 于 函数 内 部 的 
arguments 变量 ， 该 变量 为 内 建 变量 ， 每 个 函数 中 都 能 调用 。 它 能 返回 函数 所 接收 的 所 
有 参数 。 例 如 : 


> function args() { 
return arguments; 
} 
> args (); 


[] 
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> args( 
[1, 2, 


3， 


dy 


4, true 


arguments， 我 们 可 以 ; 


的 参数 执行 求 和 运算 。 


4, true, 
， "ninja"] 


LN) 


步 完 善 sum ( 


function sumOnSteroids() { 
Var i, 

res = 0, 

number of params = arguments.length; 


fOr 


res += arguments [ 工 ] ; 


} 


return res; 


下 面 , 我 


> SumoOnsS 


> sumOnsS 
20 


> SumoOnsS 
5 


> sumOns 
0 


上 eroiaqs (1 


teroids (1, 


teroids(1, 


门 用 不 同 数量 的 参数 〈 包 括 没 
们 预计 的 方式 工作 : 


teroids (5) ， 


teroids(); 


(i = 0; i < number of params; i++) { 


函数 的 功能 ， 使 之 能 对 任意 数量 


有 参数 ) 来 测试 该 函数 ， 


瑟瑟 


其 中 ， 表 达 式 arguments .length 返回 的 是 函数 被 调用 时 所 接收 的 参数 数量 。 如 果 


您 对 这 段 代 码 中 的 某 些 语法 不 太 熟悉 ， 也 不 必 太 担心 ,我 们 将 会 在 下 一 章 中 详细 讨论 它们 。 
到 那 时 ， 您 会 发 现 arguments 实际 上 不 是 一 个 数组 (虽然 它 有 很 多 数组 的 特性 )， 而 是 一 
个 类 似 数 组 的 对 象 。 

3.2 ”预定 义 函 数 

JavaScript 引擎 中 有 一 组 可 供 随 时 调用 的 内 建 函 数 。 下面 ， 0 

在 这 一 过 程 中 ， 我 们 会 通过 一 系列 具体 的 函数 实践 ， 来 帮助 您 掌握 这 些 函 数 的 参数 和 返 


1 
4 
4 
4 
4 
4 
4 
4 
4 
4 

3.2.1 


ParserInt () 


如 果 转 换 失败 就 返回 NaN。 


12 


NaN 

> parseInt ('labc23" 
1 

> parseInt ('123abc"' 


ParseInt () ; 


parseFloat () ; 


isNaN () ; 
isFinite(); 
encodeURI () ; 


decodeURI () ; 


encodeURIComponent ( ) ; 


decodeURIComponent ( ) ; 


eval () 。 


y 需要 知道 该 函数 
CQ 丰 亿 一 个 果 金 了， 
参数 )， 就 能 获 


于 任何 函数 


直 ， 以 便 最 终 实 现 熟 练 应 用 。 


这 些 内 建 


黑 盒 函 数 
一 般 来 说 ， 当 我 们 调用 一 个 函 老 


函数 包括 


您 只 需要 给 


I 


炊 时 ， 程 序 是 不 


的 内 部 工作 细节 的 。 我 们 可 以 将 其 
它 一 些 值 0 
取 它 输出 的 返回 结果 。 这 种 思维 适 

既 包 括 JavaScript 中 的 内 建 函 数 


包括 由 任何 个 人 或 集体 所 创建 的 函数 。 


parseInt() 


parseInt('123');，; 
3 


parseIlInt('abcl23" 


); 


); 


); 


会 试图 将 其 收 到 的 任何 输入 值 


(通常 是 字 


符 串 ) 转换 成 整数 类 型 输出 。 
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123 


除 此 之 外 ， 该 函数 还 有 个 可 选 的 第 二 参数 ， 基 数 〈radix)， 它 负责 设 定 函数 所 期 望 的 数字 
类 型 上 进 制 、 十 六 进 制 、 二 进 制 等 。 在 下 面 的 例子 中 ， 如 果 试 图 以 十 进 制 输出 字符 串 
"FF"， 结 果 就 会 为 NaN。 而 改 为 十 六 进 制 ， 我 们 就 会 得 到 255。 


> parseInt ('FF', 10); 
NaN 


> parseInt ('FF', 16); 
255 


再 来 看 一 个 将 字符 串 转 换 为 十 进 制 和 八 ; 


> parseInt('0377', 10); 
377 


> parseInt('0377', 8); 
255 


制 的 例子 : 


了 


如 果 我 们 在 调用 parseInt () 时 没有 指定 第 二 参数 ， 函 数 就 会 将 其 默认 为 十 进 制 ， 但 


有 两 种 情况 例外 。 


令 如 果 首 参数 字符 串 是 0x 开头 ， 第 二 参 


十 六 进 制 数 )。 


数 就 会 被 默认 指定 为 16《〈 也 就 是 默认 其 为 


多 如果 首 参 数 以 0 开头 , 第 二 参数 就 会 被 默认 指定 为 8 (也 就 是 默认 其 为 八进制 数 )。 


> parseInt('377°'); 


377 

> parseInt('0377"'); 
255 

> parseInt ('O0x377"'); 
887 


当然 ， 明 确 指定 radix 值 总 是 最 安全 的 。 如 果 您 省 略 了 它 ， 
够 正常 运作 《毕竟 最 常用 的 还 是 十 进 制 数 )， 但 我 们 偶尔 还 是 会 在 调试 时 发 现 一 些小 问题 。 
例如 ， 当 我 们 从 日 历 中 读 取 日 期 时 ， 对 于 08 这 样 的 数据 ， 如 果 不 设 定 radix 参数 可 能 就 会 


导致 意 想不到 的 结果 。 


尽管 99% 的 情况 下 依然 能 


中 与 十 进 制 的 混淆 。 
3.2.2 parseFloat() 
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值得 一 提 的 是 , ECMAScript 5 移 除 了 八进制 的 默认 表示 法 , 这 避免 了 其 在 parseInt () 


parseFloat () 的 功能 与 parseInt () 基本 相同 , 只 不 过 它 仅 支持 将 输入 值 转换 为 十 


进 制 数 。 因 此 ， 该 函数 只 有 一 个 参数 。 


> ParseEloat('"123 7") ， 

123 

> parseFloat('1.23°'); 

1.23 

> parseFloat('1.23abc.00');} 
1.23 

> parseFloat('a.bcl.23"'); 
NaN 


与 parseInt() 相同 的 是 , parseFloat() 在 过 到 第 一 个 异常 字符 时 就 会 放弃 , 无 论 


/ 


剩余 的 那 部 分 字符 串 是 否 可 用 。 


> ParSseFloat ('al23.347) 
NaN 


> parseFloat('12a3.34"'); 
12 


此 外 ，parseFloat () 还 可 以 接受 指数 形式 的 数 


> parseFloat('123e-2"');}; 
1.23 


> parseFloat('l1e10'); 
10000000000 


> parseInt('le1l0'); 
1 


《这 点 与 parseInt () 不 同 )。 


68 JavaScript 面向 对 象 编程 指南 (第 2 版 ) 


3.2.3 isNaN() 


=== NaN 返回 的 是 false， 这 确实 让 人 觉得 有 点 


通过 isNaN () ,我 们 可 以 确定 某 个 输入 值 是 否 是 
该 函数 也 可 以 用 来 检测 parseInt () 和 parseFloat () 的 调用 成 功 与 否 。 


> isNaN (NaN); 
true 


> isNaN (123); 
false 


> isNaN(1.23); 
false 


> isNaN(parseInt ('abc123')); 


该 函数 也 会 始终 试图 将 其 所 接收 的 输入 转换 为 数字 ， 例 如 : 


> isNaN('1.23');，; 


> isNaN('al.23'); 
true 


isNaN () 函数 是 非常 有 用 的 ， 


3.2.4 isFinite() 


辕 


为 NaN 


自己 不 存在 等 值 的 概念 , 也 就 是 


isFinite() 可 以 用 来 检查 输入 是 


> isFinite(Infinity); 
false 


> isFinite(-Infinity); 
false 


> isFinite(12); 


荆 


征 


菲 夷 所 思 ”。 


和 实 上 ， 读 者 可 以 将 NaN 理解 为 一 个 集合 ， 


个 可 以 参与 


落 


Mm 


然 未 必 是 等 值 的 。 


译 


者 注 


说 表达 式 NaN 


个 既 非 Infinity 也 非 NaN 的 数字 。 


true 


> isFinite(le308); 
true 


> isFinite(le309); 
false 


关于 后 两 个 调用 的 结果 ， 我 们 可 以 回忆 上 一 章 中 的 内 容 ， 即 JavaScript 中 的 最 大 数字 
为 1.7976931348623157e+308， 因 此 1e309 会 被 视 作 为 无 穷 数 。 


3.2.5 URI 的 编码 与 反 编 码 


在 URL (Uniform Resource Locator， 统 一 资源 定位 符 ) 或 URI (Uniform Resource 
Identifier， 统 一 资源 标识 符 ) 中 ， 有 一 些 字符 是 具有 特殊 含义 的 。 如 果 我 们 想 “ 转 义 ” 这 
些 字符 ， 就 可 以 去 调用 函数 encodeURI () 或 encodeURIComponent () 。 前 者 会 返回 一 
个 可 用 的 URL， 而 后 者 则 会 认为 我 们 所 传递 的 仅仅 是 URL 的 一 部 分 。 例 如 ， 对 于 下 面 这 
个 查询 字符 串 来 说 ， 这 两 个 函数 所 返回 的 字符 编码 分 别 是 ; 


> var url = "http://www.packtpub.com/scr ipt.php?d=this and that'; 
> encodeURI (url); 


"http://www.packtpub.com/scr%$20ipt.php?q=this%20and%20that" 


> encodeURIComponent (ur1); 


"http%3A%S2F%2Fwww .packtpub .com%2Fscr%20ipt.php%3Fq%3Dthis%20and%20that" 
encodeURI() 和 encodeURIComponent () 分 别 都 有 各 自 对 应 的 反 编 码 函 数 : 
decodeURI() 和 decodeURIComponent () 。 


另外 ， 我 们 有 时 候 还 会 在 一 些 遗留 代码 中 看 到 相似 的 编码 函数 和 反 编 码 函 数 escape () 
和 unescape () ， 但 我 们 并 不 赞成 使 用 这 些 函 数 来 执行 相关 的 操作 ， 它 们 的 编码 规则 也 不 尽 
相同 。 


3.2.6 eval() 


eval () 会 将 其 输入 的 字符 串 当 做 JavaScript 代码 来 执行 。 
> ,eval ("var 1 三 2377 

> i 

2 
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所 以 ， 这 里 的 eval ('var ii = 2;') 与 表达 式 var ii = 2; 的 执行 效果 是 相 
同 的 。 


尽管 eval () 在 某 些 情况 下 是 很 有 用 的 ， 但 如 果 有 选择 的 话 ， 我 们 应 该 尽量 避免 使 
j 它 。 毕 竟 在 大 多 数 情况 下 , 我 们 有 更 优雅 的 选择 , 这 些 选 择 通常 也 更 易于 编写 和 维护 。 
对 于 许多 经 验 丰 富 的 JavaScript 程序 员 来 说 ,“Eval is evil”(Eval 是 魔鬼 ) 是 一 句 至 理 
名 言 。 
因为 eval () 是 这 样 一 种 函数 : 


令 ” 安 全 性 方面 一 一 JavaScript 拥有 的 功能 很 强大 ， 但 这 也 意味 着 很 大 的 不 确定 性 ， 如 
果 您 对 放 在 eval () 函数 中 的 代码 没有 太 多 把 握 ， 最 好 还 是 不 要 这 样 使 用 。 


”性 能 方面 它 是 一 种 由 函数 执行 的 “动态 ”代码 ， 所 以 要 比 直 接 执行 脚本 要 4 
3.2.7 ”一 点 惊喜 一 alert0 因 数 


En 


接 下 来 ,让 我 们 来 看 一 个 非常 常见 的 函数 一 一 alert () 。 该 函数 不 是 JavaScript 核心 的 一 
部 分 ( 即 它 没有 包括 在 ECMA 标准 中 )， 而 是 由 宿主 环境 一 一 浏览 器 所 提供 的 ， 其 作用 是 显示 
一 个 带 文本 的 消息 对 话 框 。 这 对 于 某 些 调试 很 有 帮助 。 当 然 ， 大 多 数 情况 下 ， 现 代 浏 览 器 的 
调试 工具 更 加 好 用 一 些 。 


图 3-1 就 是 alert ("hello1!") 的 执行 效果 图 。 


The page at http://phpied.com says: 加 


hellol 


3-1 


当然 ， 在 使 用 这 个 函数 之 前 ， 我 们 必须 要 明白 这 样 做 会 阻塞 当前 的 浏览 器 线程 。 也 就 


是 说 ,在 alert () 的 执行 窗口 关闭 之 前 ， 当 前 所 有 的 代码 都 会 暂停 执行 。 因 此 ， 对 于 一 个 
忙碌 的 AJAX 应 用 程序 来 说 ，alert () 通常 不 是 一 个 好 的 选择 。 
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3.3 ”变量 的 作用 域 


这 是 一 个 至 关 重 要 的 问题 。 特 别 是 当 我 们 从 别 的 语言 转向 JavaScript 时 ， 必 须要 明 
白 一 点 ， 即 在 JavaScript 中 ， 变 量 的 定义 并 不 是 以 代码 块 作为 作用 域 的 ， 而 是 以 函数 作 
为 作用 域 。 也 就 是 说 ， 如 果 变 量 是 在 某 个 函数 中 定义 的 ， 那 么 它 在 函数 以 外 的 地 方 是 不 
可 见 的 。 而 如 果 该 变量 是 定义 在 1f 或 者 for 这 样 的 代码 块 中 的 ， 它 在 代码 块 之 外 是 可 
见 的 。 另 外 , 在 JavaScript 中 , 术语 “全 局 变量 ” 指 的 是 定义 在 所 有 函数 之 外 的 变量 〈 也 
就 是 定义 在 全 局 代码 中 的 变量 )， 与 之 相对 的 是 “局 部 变量 ”所 指 的 则 是 在 某 个 函数 中 
定义 的 变量 。 其 中 ， 函 数 内 的 代码 可 以 像 访问 自己 的 局 部 变量 那样 访问 全 局 变量 ， 反 之 
则 不 行 。 

下 面 来 看 一 个 具体 示例 ， 请 注意 两 点 : 

函数 地 () 可 以 访问 变量 global。 

令 在 函数 E() 以 外 ， 变 量 1ocal 是 不 存在 的 。 


Var global = 1; 

\ ooaok el gm i 
Var local = 2，; 
globalt+; 
return global; 


} 


让 我 们 来 测试 一 下 : 


> £(); 
2 

> 工 () 7 
3 

> local; 


ReferenceError: local is not defined 


这 里 还 有 一 点 很 重要 ， 如 果 我 们 声明 一 个 变量 时 没有 使 用 var 语句 ， 该 变量 就 会 被 默 
认为 全 局 变量 。 让 我 们 来 看 一 个 具体 示例 ， 如 图 3-2 所 示 。 
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Developer Tools - chrome:/ /newtab/ 


二 | RR 4 
园丁 Oona 
Elements Resources Network Scripts Timeline Profiles Audits Console 
> function f () {local = 2} 
undefined 
> local; 
OReferenceError: local is not defined 
> f(); 
undefined 
> local; 
2 
> 
国 污 YQ <topframe> $ | | Errors Warnings Logs 


Q 


Search Console 


3-2 


证 我 们 来 看 看 上 男 


最 佳 实践 


究竟 发 生 了 些 什么 。 首先， 我 们 在 函数 £() 中 定义 了 一 个 变量 
local。 在 该 函数 被 调用 之 前 ， 这 个 变量 是 不 存在 的 。 该 变量 会 在 函数 首次 被 调用 时 创建 
并 被 赋予 全 局 作用 域 。 这 使 得 我 们 可 以 在 该 函数 以 外 的 地 方 访问 它 。 


呀 


令 尽量 将 全 局 变量 的 数量 降 到 最 低 ， 以 避免 命名 冲 
突 。 因 为 如 果 有 两 个 人 在 同一 段 脚 本 的 不 同 函 数 中 
使 用 了 相同 的 全 局 变量 名 ， 就 很 容易 导致 不 可 预测 


网 的 结果 和 难以 察觉 的 bug。 


令 最 好 总 是 使 用 var 语句 来 声明 变量 。 


令 可 以 考虑 使 用 “单一 var” 模 式 ， 即 ， 仅 在 函数 体内 的 
第 一 行使 用 一 个 var 来 定义 这 个 作用 域 中 所 有 需要 的 变 
量 。 这 样 一 来 ， 我 们 就 能 很 轻松 地 找到 相关 变量 的 定义 ， 
并 且 在 很 大 程度 上 避免 了 不 小 心 污染 全 局 变量 的 情况 。 


变量 提升 


下 面 , 我 们 再 来 看 一 个 很 有 趣 的 例子 , 它 显 示 了 关于 局 部 和 全 局 作用 域 的 另 一 个 重要 问题 。 


Var a = 123; 


Function. f(y) 
alert (a); 
1; 
); 


{ 


var a = 
alert (a 


} 


£(); 


尔 
您 


可 能 会 想当然 地 认为 alert () 
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旺 
下 思 


Et 
局 ] 


全 


的 是 123 (也 就 是 变量 a 的 值 )， 而 


第 二 次 显示 的 是 1 ( 
undefinedq， 这 是 因 
的 全 局 变量 ， 尽 管 在 


即 局 


侍 al 


部 变量 a )。 
Ce 


第 
有 


次 
事实 并 3 


M0 


E 如 此 ， 第 一 个 alert () 实际 上 显示 的 是 


ert() 


于 全 局 域 ， 所 以 局 
一 次 被 调 月 


部 变量 a 会 


旧时 ，a 还 没有 被 了 


覆盖 掉 所 有 与 它 同 名 
E 式 定义 ( 即 该 值 为 


undefined), 但 该 变量 


也 就 是 说 ， 当 JavaScript 执行 
会 被 移动 (或 者 说 提升 ) 到 函数 最 


意 的 是 ， 被 提升 的 只 有 变量 
行 开始 时 就 存在 ， 而 与 之 术 


时 的 声明 ， 1; 


前 面 的 例子 中 ， 局 部 变量 


Yar 可 


下 迷信 


faetLron EC) 斌 
var a; 
alert (a 
a 下 训 
alert (a 


} 


); // unde 


站 光大- 


// same as: 


var a 
fined 


当然 ， 我 们 也 可 以 采 


j 在 最 佳 实践 


六 本 地 空 


过 程 进入 新 的 函数 时 ， 这 个 函数 内 被 声明 的 所 有 变量 
Tf 始 的 地 方 。 


日 关 的 赋值 操作 
廿 本 身 被 提升 到 了 函数 开始 处 
个 例子 可 以 被 等 价 地 改写 为 : 


司 了 。 这 种 特殊 


的 现象 叫做 提升 (hoisting )。 


量 都 
这 个 概念 很 重要 ， 必 须 牢 记 。 另 外 需要 注 
只 有 函数 体内 声明 的 这 些 变量 在 该 函数 执 
它 还 在 其 原来 的 位 置 上 。 璧 如 在 


， 但 并 没有 在 开始 处 就 被 赋值 为 1。 


这 意味 着 ， 


undefined; 


以 手动 提升 变量 


声明 的 位 置 ， 


3.4 ”函数 也 是 


也 就 是 说 ， 我 们 可 以 把 一 个 函数 赋值 


数据 


在 JavaScript 中 ， 函 数 实际 上 也 是 一 


FP 提 到 过 的 单一 var 模式 。 在 这 个 例子 中 ， 我 们 可 


这 样 一 来 代码 就 不 会 被 JavaScript 的 提升 行为 所 混淆 了 。 


数据 。 这 


概念 对 于 我 们 日 后 的 学 习 至 关 习 


类 


Rh 


给 


个 变量 。 
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var f = function() { 
return 1; 


}; 
上 面 这 种 定义 方式 通常 被 叫做 函数 标识 记 法 (function literal notation ) 。 


function() { return 1;} 是 一 个 函数 表达 式 。 函 数 表 达 式 可 以 被 命名 ， 称 为 命名 
函数 表达 式 (named function expression，NFE)。 所 以 以 下 这 种 情况 也 是 合法 的 ， 虽 然 我 们 
不 常常 用 到 (在 这 里 , myFunc 是 函数 的 名 字 , 而 不 是 变量 ; IE 会 错误 地 创建 f 和 myFunc 


两 个 变量 ”): 


var f = function myFunc() { 
return 1; 


}; 


这 样 看 起 来 ， 似 乎 命名 函数 表达 式 与 函数 声明 没有 什么 区 别 。 但 它们 其 实 是 不 同 的 。 
两 者 的 差别 表现 于 它们 所 在 的 上 下 文 。 函 数 声明 只 会 出 现在 程序 代码 里 《在 另 一 个 函数 的 


| 


函数 体 中 ， 或 者 在 程序 主体 中 )。 本 书 的 后 续 章节 会 有 更 多 的 举例 来 阐明 这 些 概念 。 
如 果 我 们 对 函数 变量 调用 typeof， 操 作 符 返回 的 字符 串 将 会 是 "function"。 


> function define() { 
ET 环 光 


} 


> Var express = function () { 
ECUET tL 


}; 


> typeof define; 
"function" 


> typeof express; 
"function" 


的 特性 。 
令 ”它们 所 包含 的 是 代码 。 


”其 实 ， 新 版 的 下 已 经 修复 了 这 个 问题 。 一 一 译 者 注 


所 以 ，JavaScript 中 的 函数 也 是 一 种 数据 ， 只 不 过 这 种 特殊 的 数据 类 型 有 两 个 重要 
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令 ”它们 是 可 执行 的 (或 者 说 是 可 调 月 


的 )。 


和 我 们 之 前 看 到 的 一 样 ， 要 调用 某 个 函数 ， 只 需要 在 它 的 名 字 后 面 加 一 对 括号 即 可 。 
我 们 再 来 看 一 个 示例 ， 下 面 这 段 代 码 工 作 与 函数 的 定义 方式 无 关 ， 它 演示 的 是 如 何 像 变量 
那样 使 用 函数 一 一 也 就 是 说 ， 我 们 可 以 将 它 拷贝 给 不 同 的 变量 。 

> Var sum = function(a, b) { 

return a + b; 
}; 

> var add = sum; 

> typeof add; 

"function" 

>i(L,: :这 ) >》 

3 

由 于 函数 也 是 赋值 给 变量 的 一 种 数据 ， 所 以 函数 的 命名 规则 与 一 般 变 量 相同 即 函 


数 名 不 能 以 数字 开头 ， 并 且 可 以 由 作 


3.4.1 匿名 函数 


FE 意 的 字母 、 数 字 、 下 划 线 和 美元 符号 组 合 而 成 。 


正如 您 所 知 ， 我 们 可 以 这 样 定义 一 个 函数 : 
var f = function(a) { 
ee 
通过 这 种 方式 定义 的 函数 常 被 称 为 匿名 函数 ( 即 没有 名 字 的 函数 ), 特别 是 当 它 不 被 赋 
值 给 变量 单独 使 用 的 时 候 。 在 这 种 情况 下 ， 此 类 函数 有 两 种 优雅 的 用 法 : 
”您 可 以 将 匿名 函数 作为 参数 传递 给 其 他 函数 ， 这 样 ， 接 收 方 函数 就 能 利用 我 们 所 
传递 的 函数 来 完成 某 些 事情 。 
”您 可 以 定义 某 个 匿名 函数 来 执行 某 些 一 次 性 任务 。 
接 下 来 ， 我 们 来 看 两 个 具体 的 应 用 示例 ， 通 过 其 中 的 细节 来 进一步 了 解 匿名 函数 。 
3.4.2 ”回调 函数 


既然 函数 与 任何 可 以 被 赋值 给 变量 的 数据 是 相同 的 ， 那 么 它 当然 可 以 像 
被 定义 、 删 除 、 找 贝 ， 以 及 当成 参数 传递 给 


他 数据 那 


~ 


他 函数 。 
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在 下 面 的 示例 中 ， 我 们 定义 了 一 个 函数 ， 这 个 函数 有 两 个 函数 类 型 的 参数 ， 然 后 它 会 
分 别 执行 这 两 个 参数 所 指向 的 函数 ， 并 返回 它们 的 返回 值 之 和 。 


function invokeAdd(a, b){ 
return a() + b(); 


} 


下 面 让 我 们 来 简单 定义 一 下 这 两 个 参与 加 法 运算 的 函数 (使 用 函数 声明 模式 ), 它们 只 
单纯 地 返回 一 个 固定 值 : 


计 


function one() { 
EEtUEn “x 


} 


function two() { 
return 2; 


} 


现在 ,我们 只 需 将 这 两 个 函数 传递 给 目标 函数 invokeAgq () ， 就 可 以 得 到 执行 结果 了 : 


> invokeAdd (one, two); 
3 


事实 上 ， 我 们 也 可 以 直接 用 匿名 函数 〈 即 函数 表达 式 ) 来 代替 one () 和 two () ， 以 作 
为 目标 函数 的 参数 ， 例 如 : 


> invokeAdd (function () return 1; }, function () return 2; }); 


或 许 ， 我 们 可 以 换 一 种 可 读 性 更 高 的 写法 : 


> invokeAdd( 
function. () "retairn. La J; 
function () { return 2; } 


); 


当然 ， 您 也 可 以 这 样 写 : 


> invokeAdd( 
fanNnetion: (}, 二 
etErir 
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} ， 
FOrCt Lion ci() 
return 2; 


} 
); 


{ 


3 


当 我 们 将 函数 A 传递 给 函数 B, 并 由 B 来 执行 A 时 , A 就 成 了 一 个 回调 函数 (callback 


functions)。 如 果 这 时 A 还 是 一 个 无 名 函数 ， 我 们 就 称 它 为 匿名 回调 函数 。 

那么 ， 应 该 什么 时 候 使 用 回调 函数 呢 ? 下 面 我 们 将 通过 几 个 应 用 实例 来 示范 下 回调 函 
数 的 优势 ， 包 括 : 

令 ” 它 可 以 让 我 们 在 不 做 命名 的 情况 下 传递 浮 数 (这 意味 着 可 以 节省 变量 名 的 使 用 )。 

令 ” ”我们 可 以 将 一 个 函数 调用 操作 委托 给 男 一 个 函数 (这 意味 着 可 以 节省 一 些 代码 编 

写 工 作 )。 

令 它们 也 有 助 于 提升 性 能 
3.4.3 ”回调 示例 

在 编程 过 程 中 ， 我 们 通常 需要 将 一 个 函数 的 返回 值 传 递 给 另 一 个 函数 。 在 下 面 的 例子 
中 ， 我 们 定义 了 两 个 函数 : 第 一 个 是 multiplyByTwo () ， 该 函数 会 通过 一 个 循环 将 其 所 
接受 的 三 个 参数 分 别 乘 以 2， 并 以 数组 的 形式 返回 结果 ; 第 二 个 函数 aqdone () 只 接受 一 


个 值 ， 然 后 将 它 加 1 并 返回 。 


function multiplyByTwo (ay 


var i, ar ] ,2 
OF 1 X33 
= arguments[i 


for(i 
ar[i] 


} 
return ar; 
} 
function addone(a) { 


return a 二 1; 


} 


现在 ， 


> multiplyByTwo (1, 2, 3 


引 中 十 ;) 


我 们 来 测试 一 下 这 两 


b, c) { 


{ 


] 22 


个 函数 ， 结 果 如 下 : 


); 
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> adqdqone(100) 
101 


接 下 来 ， 假 设 我 们 有 三 个 元 素 ， 我 们 要 实现 这 三 个 元 素 在 两 个 函数 之 间 的 传递 。 这 需 
定义 另 一 个 数组 ， 用 于 存储 来 自 第 一 步 的 结果 。 我 们 先 从 multiplyByTwo () es 


> var myarr = []; 
> myarr = multiplyByTwo (10, 20, 30); 
[20, 40, 60] 


然后 ， 用 循环 遍历 每 个 元 素 ， 并 将 它们 分 别传 递 给 adqdone () 。 


> for (var i = 0; i < 3; i++) { 
myarr[i] = addOne (myarr [i]); 
} 
> myarr; 
[21, 41, 61] 


如 您 所 见 ， 这 段 代码 可 以 工作 ， 但 是 显然 还 有 一 定 的 改善 空间 。 特 别 是 这 里 使 用 了 两 
个 循环 ， 如 果 数 据 量 很 大 或 循环 操作 很 复杂 的 话 ， 开 销 一 定 不 小 。 因 此 ， 我 们 需要 将 它们 
合 二 为 一 。 这 就 需要 对 multiplyByTwo () 函数 做 一 些 改动 ， 使 其 接受 一 个 回调 函数 ， 并 
在 每 次 迭代 操作 中 调用 它 。 具 体 如 下 : 


function multiplyByTwol(a, b, c, callback) { 
2 四 的 斤 en 才 册 罗 | 
for(i = 0; i < 3; i++) { 
ar[i] = callback (arguments[i] * 2); 
} 
return ar; 


} 


函数 修改 完成 之 后 ， 之 前 的 工作 只 需要 一 次 函数 调用 就 够 了 ， 我 们 只 需 像 下 面 这 样 同 
时 将 初始 值 和 回调 函数 传递 给 它 : 


> myarr = multiplyByTwo (1, 2, 3, addone); 
[3, 5, 7] 


同样 , 我 们 还 可 以 用 匿名 函数 来 代替 addqone () , 这 样 做 可 以 节省 一 个 额外 的 全 局 变量 。 


nt 


> multiplyByTwo (1, 2, 3, function (a) { 
tuUrn d,s 
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} ) ; 
[3, 5, 7] 


而 且 ， 使 用 匿名 函数 也 更 易于 随时 根据 需求 调整 代码 。 例 如 : 


> multiplyByTwo (1, 2, 3, function(a)f{ 


return a + 2; 
[4, 6， 8] 
3.4.4 ”即时 函数 


目前 我 们 已 经 讨论 了 匿名 函数 在 回调 方面 的 应 用 。 接 下来， 我们 来 看 
个 应 用 示例 一 一 这 种 函数 可 以 在 定义 后 立即 调用 。 比 如 ; 


名 函数 的 另 一 


i 


( 
function()f{ 
alert('boo'); 
} 
) () ; 


这 种 语法 看 上 去 有 点 吓人 ， 但 其 实 很 简单 一 一 我 们 只 需 将 匿名 函数 的 定义 放 进 一 对 括 
号 中 ， 然 后 外 面 再 紧 跟 一 对 括号 即 可 。 其 中 ， 第 二 对 括号 起 到 的 是 “立即 调用 ”的 作用 ， 
同时 它 也 是 我 们 向 匿名 函数 传递 参数 的 地 方 。 


( 
function (name){ 
alert('Hello ' + name + '!'); 
} 
) ('dude'); 


另外 ， 您 也 可 以 将 第 一 对 括号 闭合 于 第 二 对 括号 之 后 。 这 两 种 做 法 都 有 效 。 


(function () { 
A 
} () ); 
// vs. 
(functioin () { 


Fa 
}) 0); 
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使 用 即时 〔 自 调 ) 匿名 函数 的 好 处 是 不 会 产生 任何 全 局 变量 。 当 然 ， 缺 点 在 于 这 检 
函数 是 无 法 重复 执行 的 《除非 您 将 它 放 在 某 个 循环 或 其 他 函数 中 )。 这 也 使 得 即时 函数 
适合 于 执行 一 些 一 次 性 的 或 初始 化 的 任务 。 


如 果 需 要 的 话 ， 即 时 函数 也 可 以 有 返 


IIT 


球 村 


rT 


值 ， 虽 然 并 不 第 见 : 


Var result = (function () { 
// something complex with 
// temporary local variables... 


A/ 司 


// return something; 


} () ) ; 


当然 在 这 个 例子 中 ， 将 整个 函数 表达 式 用 括号 包 起 来 是 不 必要 的 ， 我 们 只 要 在 函数 最 
后 使 用 一 对 括号 来 执行 这 个 函数 即 可 。 所 以 上 例 又 可 以 改 为 : 


Var result = function () 1{ 
// something complex with 
// temporary local variables... 
// return something; 


} (0); 


虽然 这 种 写法 也 有 效 ， 但 可 读 性 就 毕竟 稍微 差 了 点 : 不 读 到 最 后 ， 你 就 无 法 知道 
result 到 底 是 一 个 函数 ， 还 是 一 个 即时 函数 的 返回 值 。 


3.4.5 内 部 (私有 ) 函数 


想必 我 们 都 记得 ， 函 数 与 其 他 类 型 的 值 本 质 上 是 一 样 的 ， 因 此 ， 没 有 什么 理由 可 以 阻 
止 我 们 在 一 个 函数 内 部 定义 另 一 个 函数 。 


function outer (Param) { 
function inner (theinput) { 
return theinput * 2); 
} 
return "The result is ' + inner (param); 


} 
我 们 也 可 以 改 用 函数 标识 记 法 来 写 这 段 代 码 : 


Var outer = function (param) { 
var inner = function (theinput) { 


return theinput * 2) 
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}; 
return "The result is ' + inner (param); 


}; 


当 我 们 调用 全 局 函数 outer () 时， 本 地 函数 inner () 也 会 在 其 内 部 被 调用 。 由 于 
inner () 是 本 地 函数 ， 它 在 outer () 以 外 的 地 方 是 不 可 见 的 ， 所 以 我 们 也 能 将 它 称 为 私 
有 函数 。 


> outer (2) ， 
"The result is 4" 


> outer (8) ， 
"The result is 16" 


> inner (2); 


ReferenceError: inner is not defined 


使 用 私有 函数 的 好 处 主要 有 以 下 几 点 ; 
% ”有 助 于 我 们 确保 全 局 名 字 空 间 的 纯净 性 这 意味 着 命名 冲突 的 机 会 很 小 )。 
% 确保 私有 性 一 这 使 我 们 可 以 选择 只 将 一 些 必要 的 函数 暴露 给 “外 部 世界 ”， 而 保 
留 属于 自己 的 函数 ， 使 它们 不 为 该 应 用 程序 的 其 他 部 分 所 用 。 
3.4.6 ”返回 函数 的 函数 


正如 之 前 所 提 到 的 ， 函 数 始终 都 会 有 一 个 返回 值 ， 即 便 不 是 显 式 返回 ， 它 也 会 隐 式 返 
回 一 个 undqefined。 既 然 函数 能 返回 一 个 唯一 值 ， 那 么 这 个 值 就 也 有 可 能 是 另 一 个 函数 。 
例如 : 


| 


function a() { 
alert ('A!'); 
return function()f{ 
alert('B!'); 
}; 
} 


在 这 个 例子 中 ， 函 数 a () 会 在 执行 它 的 工作 (弹出 'A!') 之 后 返回 另 一 个 函数 。 而 所 返 
回 的 函数 又 会 去 执行 男 外 一 些 事情 (弹出 'B!1')。 我 们 只 需 将 该 返回 值 赋值 给 某 个 变量 ， 然 
后 就 可 以 像 使 用 一 般 函 数 那样 调用 它 了 。 


| 
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> Var newFunc = a(); 


> newFunc () ， 


如 您 所 见 ， 上 面 第 一 行 执行 的 是 alert ('A!') ， 第 二 行 才 是 alert ('B!')。 


如 果 您 想 让 返回 的 函数 立即 执行 ， 也 可 以 不 用 将 它 赋值 给 变量 ， 直 接 在 该 调用 后 面 再 
加 一 对 括号 即 可 ， 效 果 是 一 样 的 : 


> al()()， 
3.4.7 ”能 重 写 自 己 的 函数 


由 于 一 个 函数 可 以 返回 另 一 个 函数 ， 因 此 我 们 可 以 用 新 的 函数 来 覆盖 旧 的 。 例 如 在 之 
前 的 例子 中 ， 我 们 也 可 以 通过 a () 的 返回 值 来 重 写 a () 函数 自己 : 


六 =a(0)2 


当前 这 名 依然 只 会 执行 alert (A!')， 但 如 果 我 们 再 次 调用 a() ， 它 就 会 执行 
slert (Bi 了 。 这 对 于 要 执行 菜 些 一 次 性 初始 化 工作 的 函数 来 说 会 非常 有 用 。 这 样 一 来 
该 函数 可 以 在 第 一 次 被 调用 后 重 写 自己 ， 从 而 避免 了 每 次 调用 时 重复 一 些 不 必要 的 操作 。 

在 上 面 的 例子 中 ， 我 们 是 在 外 面 来 重 定 义 该 函数 的 一 一 即 我 们 将 函数 返回 值 赋值 给 函 
数 本 身 。 但 我 们 也 可 以 让 函数 从 内 部 重 写 自己 。 例 如 : 


function a() { 

alert ('A!'); 

a = function(){ 

alert('B!'); 

}; 
} 
这 样 一 来 ， 当 我 们 第 一 次 调用 该 函数 时 会 有 如 下 情况 发 生 。 
令 alert (和 0 将 会 被 执行 〈 可 以 视 之 为 一 次 性 的 准备 操作 )。 
全 局 变量 a 将 会 被 重 定义 ， 并 被 赋予 新 的 函数 。 
而 如 果 该 函数 再 被 调用 的 话 ， 被 执行 的 就 将 是 alert ('B!') 了。 


下 面 ， 我 们 来 看 一 个 组 合 型 的 应 用 示例 ， 其 中 有 些 技术 我 们 将 会 在 本 章 最 后 几 节 中 讨论 。 


var a = (function () { 


function someSetup () { 


} () 


Var setup = 'done'; 


} 


function actualWork() { 
alert ('Worky-worky'); 
} 


someSetup (); 
return actualWork; 


); 


在 这 个 例子 中 有 如 下 情况 。 


第 3 章 函数 83 


信 ”我 们 使 用 了 私有 消 数 一 一 someSetup() 和 actualWork () 。 

令 ”我 们 也 使 用 了 即时 函数 一 一 函数 a () 的 定义 后 面 有 一 对 括号 ， 因 此 它 会 执行 自 调 。 

令 当 该 函数 第 一 次 被 调用 时 , 它 会 调用 someSetup (), 并 返回 函数 变量 actualWork 
的 引用 。 请 注意 ， 返 回 值 中 是 不 带 括号 的 ， 因 此 该 结果 仅仅 是 一 个 函数 引用 ， 并 
不 会 产生 函数 调用 。 

令 由 于 这 里 的 执行 语句 是 以 var a = .. .开头 的 ， 因 而 该 自 调 函数 所 返回 的 值 会 
重新 赋值 给 a。 

如 果 我 们 想 测试 一 下 自己 对 上 述 内 容 的 理解 ， 可 以 尝试 回答 一 下 这 个 问题 ， 上 面 的 代 

码 在 以 下 情景 中 分 别 会 alert () 什么 内 容 ? 
令 ” 当 它 最 初 被 载 入 时 。 
令 之 后 再 次 调用 a () 时 。 


这 项 技术 对 于 某 些 浏览 器 相关 的 


操作 会 相当 有 用 。 


因为 在 不 同 浏览 嚣 中， 实现 相同 任 


务 的 方法 可 能 是 不 同 的 ， 我 们 都 知道 浏览 器 的 特性 不 可 能 因为 函数 调用 而 发 生 任何 改变 ， 
因此 ， 最 好 的 选择 就 是 让 函数 根据 其 当前 所 在 的 浏览 器 来 重 定 义 自己 。 这 就 是 所 谓 的 “ 浏 
览 容 性 探测 ”技术 ， 关 于 这 方面 的 应 用 示例 ， 我 们 会 在 本 书后 面 的 章节 中 给 予 展示 。 
3.5 闭 包 

在 本 章 剩 下 的 部 分 中 ， 我 们 来 谈 谈 闭 包 〈 正 好 用 来 关闭 本 章 ")。 闭 包 这 个 概念 最 初 接 
© 这 里 作者 玩 了 一 把 双关 语 ， 因 为 闭 包 (closures〉 这 个 词 也 可 以 理解 为 “关闭 ”。 一 一 译 者 注 
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触 起 来 是 有 一 定 难 度 的 ， 所 以 即使 您 在 首次 阅读 中 没 能 “ 抓 住 ”重点 ， 也 大 可 不 必 感 到 灰 
心 丧气 。 后 续 章 节 中 还 有 大 量 的 实例 可 供 您 去 慢 慢 理解 它们 ， 所 以 ， 如 果 您 觉得 现在 没有 
完全 理解 ， 可 以 在 以 后 涉及 相关 话题 时 再 回 过 头 来 看 看 这 部 分 内 容 。 

在 我 们 讨论 财 包 之 前 ， 最 好 先 来 回顾 一 下 JavaScript 中 作用 域 的 概念 ， 然 后 再 进行 某 
些 话题 扩展 。 


3.5.1 ”作用 域 链 


如 您 所 知 ， 尽 管 JavaScript 中 不 存在 大 括号 级 的 作用 域 ， 但 它 有 函数 作用 域 ， 也 就 是 
说 ， 在 某 函 数 内 定义 的 所 有 变量 在 该 函数 外 是 不 可 见 的 。 但 如 果 该 变量 是 在 某 代 码 块 中 被 
定义 的 〈 如 在 某 个 if£ 或 for 语句 中 )， 那 它 在 代码 块 外 是 可 见 的 。 


: 


> Var a= 1; 
>. funetiorm 法 并 
var b= 1; 


return a; 


> £(); 
1 


> Ds 
ReferenceError: b is not defined 


在 这 里 ， 变 量 a 是 属于 全 局 域 的 ， 而 变量 b 的 作用 域 就 在 函数 E() 内 了 。 所 以 : 
令 在 E() 内 ，a 和 hb 都 是 可 见 的 ; 


在 下 面 的 例子 中 ， 如 果 我 们 在 函数 outer () 中 定义 了 另 一 个 函数 inner () ， 那 么 ， 
在 inner () 中 可 以 访问 的 变量 既 来 自 它 自身 的 作用 域 ， 也 可 以 来 自 其 “ 父 级 ” 2 
就 形成 了 一 条 作用 域 链 (scope chain )， 该 链 的 长 度 〈 或 深度 ) 则 取决 于 我 们 的 需 


这 
[ei 


Var global = 1; 
function outer()f{ 
Var outer local = 2; 
function inner() { 
var inner local = 3; 
return inner local + outer local + global; 
} 


return inner(); 
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} 


现在 让 我 们 来 测试 一 下 ijnner () 是 否 真 的 可 以 访问 所 有 变量 : 
> outer () ， 
6 


3.5.2 ”利用 闭 包 突破 作用 域 链 


凯 | 


现在 ， 证 我 们 先 通过 图 示 的 方式 来 介绍 一 下 闭 包 的 概念 。 让 我 们 通过 这 段 代码 了 解 
其 中 奥秘 。 


var a = "global variable"; 
Var F = function () { 
var b = "local variable"; 
var N = function () { 
Var C = "inner local"; 
}; 
}; 


首先 当然 就 是 全 局 作用 域 s， 我 们 可 以 将 其 视 为 包含 一 切 的 宇宙 。 


IT 


You are here 


上 


其 中 可 以 包含 各 种 全 局 变量 〈 如 al，a2) 和 函数 〈 如 下 )。 
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每 个 函数 也 都 会 拥有 一 块 属于 自己 的 私 用 空间 ， 用 以 存储 一 些 别 的 变量 (例如 b) 以 


及 内 部 函数 例如 N)。 所 以 ， 我 们 最 终 可 以 把 示意 图 画 成 这 样 。 


在 上 图 中 ， 如 果 我 们 在 a 点 ， 那 么 就 位 于 全 局 空间 


P。 而 如 果 是 在 b 点 ， 我 们 就 在 函 


数 F 的 空间 里 ， 在 这 里 我 们 既 可 以 访问 全 局 空间 ， 也 可 以 访问 F 空间 。 如 果 我 们 在 c 点 ， 


那 就 位 于 函数 N 中 ， 我 们 可 以 访问 的 空间 包括 全 局 空间 、F 空间 
之 间 是 不 连通 的 ， 因 为 b 在 F 以 外 是 不 可 见 的 。 但 如 果 愿 意 的 话 


和 N 空间 。 其 中 ，a 和 
， 我 们 是 可 以 将 c 点 和 


点 连通 起 来 的 ， 或 者 说 将 N 与 b 连通 起 来 。 当 我 们 将 N 的 空间 扩展 到 下 以 外 ,并 止步 于 全 


局 空间 以 内 时 ， 就 产生 了 一 件 有 趣 的 东西 一 一 闭 包 。 


知道 接 下 来 会 发 生 什么 吗 ? N 将 会 和 a 一 样 置 身 于 全 局 空间 。 而 且 | 


于 函数 还 记得 它 


和 a 同 处 于 一 个 空间 ， 但 N 可 以 访问 b， 而 a 不 能 。 


那么 ，N 究竟 是 如 何 突破 作用 域 链 的 呢 ? 我 们 只 需要 


在 被 定义 时 所 设 定 的 环境 ， 因 此 它 依 然 可 以 访问 F 空间 并 使 月 


var 语句 ) 或 通过 FF 传递 (或 返回 ) 给 全 局 空间 即 可 。 下 面 ,我 们 来 看 看 


3.5.2.1 闭 包 #1 


昌 b。 这 很 有 趣 ， 因 为 丙 


见 在 N 


将 它们 升级 为 全 局 变量 (不 使 用 


具体 是 怎么 做 的 。 


首先 ， 我 们 先 来 看 一 个 函数 。 这 个 函数 与 之 前 所 


N， 而 在 函数 N 中 多 了 返回 变量 b，N 和 Pb 都 可 通过 作 


述 的 一 样 ， 只 不 过 在 F 中 多 了 返回 


] 域 链 进 行 访问 。 
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Var a = "global variable"; 
Var F = function () { 
var b = "local variable"; 
var N = function () { 
Var C = "inner local"; 
return b; 
}; 
return N; 


}; 


因此 后 者 在 全 局 空间 里 是 不 可 见 的 。 


zlll 
EE 
VS 
站 
a 


函数 F 中 包含 了 


2 
ReferenceError: b is not defined 


函数 NN 有 自己 的 私有 空间 ， 同 时 也 可 以 访问 £() 的 空间 和 全 局 空间 ， 所 以 b 对 它 来 说 
是 可 见 的 。 因为 F() 是 可 以 在 全 局 空间 中 被 调用 的 ( 它 是 一 个 全 局 函数 )， 所 以 我 们 可 以 将 
它 的 返回 值 赋值 给 另 一 个 全 局 变量 ， 从 而 生成 一 个 可 以 访问 F() 私有 空间 的 新 全 局 函数 。 


> Var inner = F(); 
RE 多 用 
"local variable" 


3.5.2.2 ” 闭 包 #2 
下 面 这 个 例子 的 最 终结 果 与 之 前 相同 ， 但 在 实现 方法 上 存在 一 些 细微 的 不 同 。 在 这 里 
返回 函数 了 ， 而 是 直接 在 函数 体内 创建 一 个 新 的 全 局 函数 inner () 。 

首先 ， 我 们 需要 声明 一 个 全 局 函数 的 占 位 符 。 尽 管 这 种 占 位 符 不 是 必须 的 ， 但 最 好 还 
是 声明 一 下 ， 然 后 ， 我 们 就 可 以 将 函数 了 () 定义 如 下 : 


AS 


HT 

一 

~ 一 
a 


var inner; // placeholder 


var F = function ()f{ 
var b = "local variable"; 
var N = function () { 
return b; 
}; 
inner = N; 


i 


现在 ， 请 读者 自行 尝试 ，F () 被 调用 时 会 发 生 什 么 : 


> F(); 
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我 们 在 F () 中 定义 了 一 个 新 的 函数 N ()， 并 且 将 它 赋 值 给 了 全 局 变量 inner。 由 于 
N() 是 在 F() 内 部 定义 的 ， 它 可 以 访问 F() 的 作用 域 ， 所 以 即使 该 函数 后 来 升级 成 了 全 局 
函数 ， 但 它 依然 可 以 保留 对 下 () 作用 域 的 访问 权 。 


Lnner ()s 


"local variable". 


3.5.2.3 ”相关 定义 与 闭 包 #3 


事实 上 , 每 个 函数 都 可 以 被 认为 是 一 个 闭 包 。 因 为 每 个 函数 都 在 其 所 在 域 ( 即 该 函数 的 作 
域 ， 中 维护 了 某 种 私有 联系 。 但 在 大 多 数 时 候 ， 该 作用 域 在 函数 体 执行 完 之 后 就 自行 销毁 了 
一 一 除非 发 生 一 些 有 趣 的 事 〈 比 如 像 上 一 小 节 所 述 的 那样 )， 导 致 作用 域 被 保持 。 

民 据 目前 的 讨论 ， 我 们 可 以 说 ， 如 果 一 个 函数 会 在 其 父 级 函数 返回 之 后 留 住 对 父 级 作 
域 的 链接 的 话 ”， 相 关闭 包 就 会 被 创建 起 来 。 但 其 实 每 个 函数 本 身 就 是 一 个 闭 包 ， 因 为 每 
个 函数 至 少 都 有 访问 全 局 作用 域 的 权限 ， 而 全 局 作用 域 是 不 会 被 破坏 的 。 

让 我 们 再 来 看 一 个 闭 包 的 例子 。 这 次 我 们 使 用 的 是 函数 参数 〈function parameter)。 该 参数 
函数 的 局 部 变量 没什么 不 同 ， 但 它们 是 隐 式 创建 的 〈 即 它们 不 需要 使 用 var 来 声明 )。 我 们 在 
里 创建 了 一 个 函数 ， 该 函数 将 返回 一 个 子 函 数 ， 而 这 个 子 函 数 返回 的 则 是 其 父 函 数 的 参数 : 


所 UT 


function F(param) { 
Var N = function()t{ 
return param; 
}; 
paramt++; 
return N; 


} 


然后 我 们 可 以 这 样 调用 它 : 


> Var inner = F(123); 
> inner(); 
124 


请 注意 ， 当 我 们 的 返回 函数 被 调用 时 ”，paramt++ 已 经 执行 过 一 次 递增 操作 了 。 所 以 
inner() 返回 的 是 更 新 后 的 值 。 由 此 我 们 可 以 看 出 ， 函 数 所 绑 定 的 是 作用 域 本 身 ， 而 不 是 
在 函数 定义 时 该 作用 域 中 的 变量 或 变量 当前 所 返回 的 值 。 


”如 上 例子 所 示 , F 是 N 0 在 F 返回 之 后 ，N 依然 可 以 访问 中 的 局 部 变量 b。 译 者 注 
“NN 被 赋值 时 函数 并 没有 被 调用 ， 调 用 是 在 N 被 求 值 ， 也 就 是 执行 retum N; 语 句 时 发 生 的 。 一 一 译 者 注 


新 图 


3.5.2.4 ”循环 中 的 闭 包 
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接 下 来 ， 让 我 们 来 看 看 新 手 们 在 闭 包 问 题 上 会 犯 哪 些 典 型 的 错误 。 毕 竞 由 闭 包 所 导致 
的 bug 往往 很 难 被 发 现 ， 因 为 它们 总 是 表面 上 看 起 来 一 切 正 常 。 


让 我 们 来 看 一 个 三 次 的 循环 操作 ， 它 在 每 次 迭代 中 都 会 创建 一 个 返 
数 。 该 新 函数 会 被 添加 到 一 个 数组 中 ， 并 最 终 返 回 。 具 体 代 码 如 下 
fCtiOns. Ed()s 4 
var arr = [], i; 
for (i = 0; i < 3; i++) { 
arr[i] = function () { 


return i; 
}; 
} 


return arr; 


} 


下 面 ， 我 们 来 运行 一 下 函数 ， 并 将 结果 赋值 给 数组 arr。 


> Var arr = F(); 


回 


当前 循环 序号 的 


现在 ， 我们 拥有 了 一 个 包含 三 个 函数 的 数组 。 您 可 以 通过 在 每 个 数组 元 素 后 面 加 一 对 


括号 来 调用 它们 。 按 通常 的 估计 ， 它 们 应 该 会 依照 循环 顺序 分 别 输出 0、1 和 2， 下 面 就 让 
我 们 来 试 试 : 


包 


Cy 


> arr[0] (); 


。 但 是 ， 闭 包 并 不 会 记录 它 


而 它们 都 指向 了 一 个 共同 的 局 部 变量 


有 的 只 是 相关 域 在 创建 时 的 一 个 连接 〈 即 引用 )。 在 这 个 例子 中 , 变量 i 


三 个 函数 域 中 。 对 这 三 个 函数 中 的 任何 一 个 而 言 ， 当 它 要 去 获取 某 个 变 


们 
恰 


转 
里 


显然 ， 这 并 不 是 我 们 想 要 的 结果 。 究 竟 是 怎么 回 事 呢 ? 原来 我 们 在 这 里 创建 了 三 个 闭 
i 


的 值 ， 它 们 所 拥 
巧 存在 于 定义 这 
时 ， 它 会 从 其 所 


在 的 域 开始 逐 级 寻找 那个 距离 最 近 的 i 值 。 由 于 循环 结束 时 i 的 值 为 3， 所 以 这 三 个 函数 
都 指向 了 这 一 共同 值 。 


90 JavaScript 面向 对 象 编程 指南 (第 2 版 ) 


为 什么 结果 是 3 不 是 2 呢 ? 这 也 是 一 个 值得 思考 的 问题 ， 它 能 帮助 您 更 好 地 理解 for 
循环 ， 请 您 自行 思考 。 
那么 ， 应 该 如 何 纠正 这 种 行为 呢 ? 答案 是 换 一 种 闭 包 形式 : 
function F() { 
var arr = [], i; 
fOr OF 3 A 
arr[i] = (function (x){ 


() 


return function 


return x; 


PL) 
} 


return arr; 


这 样 就 能 获得 我 们 预期 的 结果 了 : 


SS》 Var arr FE() 

净 ” 忆 下 天 正人 

0 

> TET] (es 

1 

> arr[2] (); 

2 

在 这 里 ， 我 们 不 再 直接 创建 一 个 返回 i 的 函数 了 ， 而 是 将 i 传递 给 了 另 一 个 即时 函数 。 在 
该 函数 中 ，i 就 被 赋值 给 了 局 部 变量 x， 这 样 一 来 ， 每 次 迭代 中 的 x 就 会 拥有 各 自 不 同 的 值 了 。 

或 者 ， 我 们 也 可 以 定义 一 个 “正常 点 的 ”内 部 函数 不 使 用 即时 函数 ) 来 实现 相同 的 
功能 。 要 点 是 在 每 次 迭代 操作 中 ， 我 们 要 在 中 间 函 数 内 将 i 的 值 “ 本 地 化 ”。 


{ 


function F() 


) 


return function(){ 


{ 


function binder (x 


return x; 
}; 
} 


Var arr = [], i; 


第 3 章 函数 91 
£0K(T -4 
arr[i] = binder(i); 
} 


return arr; 


} 


3.5.3 getter § setter 


二 


接 下 来 ， 让 我 们 再 来 看 两 个 关于 闭 包 的 应 用 示例 。 首 先是 创建 getter 和 setter。 假 设 现在 
有 一 个 变量 , 它 所 表示 的 是 某 类 特定 值 , 或 某 特定 区 间 内 的 值 。 我们 不 想 将 该 变量 暴露 给 外 部 。 
因为 那样 的 话 ， 其 他 部 分 的 代码 就 有 直接 修改 它 的 可 能 ， 所 以 我 们 需要 将 它 保 护 在 相关 函数 的 


而 女 付 已 
内 部 ， 然 后 提供 两 个 额外 的 函数 一 一 一 个 用 于 获取 变量 值 ， 男 一 个 用 于 给 变量 重新 赋值 。 并 在 
函数 中 引入 某 种 验证 措施 ， 以 便 在 赋值 之 前 给 予 变 量 一 定 的 保护 。 另 外 ， 为 简洁 起 见 ， 我 们 对 
该 类 中 的 验证 部 分 进行 了 简化 : 即 这 里 只 处 理 数字 值 。 


几 1 


我 们 需要 将 getter 和 setter 这 两 种 函数 放 在 一 个 共同 的 函数 中 ， 并 在 该 函数 中 定义 
secret 变量 ， 这 使 得 两 个 函数 能 够 共享 同一 作用 域 。 有 具体 代码 如 下 : 


Var getValue setValue; 


(function() { 
Var secret = 0; 
getValue = function(){ 


rEtULN SECS 


}; 


setValue = function (v) { 
if (typeof V === "number") { 
secret = V7 


} () ) ; 


在 这 里 ， 所 有 一 切 都 是 通过 一 个 即时 函数 来 实现 的 ， 我 们 在 其 中 定义 了 全 局 函数 
setValue () 和 getValue () ， 并 以 此 来 确保 局 部 变量 secret 的 不 可 直接 访问 性 


> getVvalue (); 
0 
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> setValue (123);，; 
> getValue (); 
123 


> SetValue (false); 


> getVvalue (); 
123 


3.5.4。” 枕 代 器 


在 最 后 一 个 关于 闭 包 应 用 的 示例 (这 也 是 本 章 的 最 后 一 个 示例 〉 中， 我 们 将 向 您 展示 
闭 包 在 实现 迭代 器 方面 的 功能 。 


通常 情况 下 ， 我 们 都 知道 如 何 用 循环 来 遍历 一 个 简单 的 数组 ， 但 是 有 时 候 我 们 需要 面 
对 更 为 复杂 的 数据 结构 ， 它 们 通常 会 有 着 与 数组 截然 不 同 的 序列 规则 。 这 时 候 就 需要 将 一 
些 “ 谁 是 下 一 个 ”的 复杂 逻辑 封装 成 易于 使 用 的 next () 函数 ， 然 后 ， 我 们 只 需要 简单 地 
调用 next () 就 能 实现 对 于 相关 的 遍历 操作 了 。 

在 下 面 这 个 例子 中 ， 我 们 将 依然 通过 简单 数组 ， 而 不 是 复杂 的 数据 结构 来 说 明 问 题 。 
该 例子 是 一 个 接受 数组 输入 的 初始 化 函数 , 我 们 在 其 中 定义 了 一 个 私有 指针 i, 该 指针 会 始 
终 指向 数组 中 的 下 一 个 元 素 。 


function setup(x) { 
Var i = 0; 
return function()f{ 
return x[i++]; 
}; 
} 


现在 ,我 们 只 需 用 一 组 数据 来 调用 一 下 setup () ， 就 可 创建 出 我 们 所 需要 的 next () 
函数 ， 具 体 如 下 : 


> Var next = setup(['a', 'b', 'c']); 


这 是 一 种 既 简单 又 好 玩 的 循环 形式 : 我 们 只 需 重 复 调用 一 个 函数 ， 就 可 以 不 停 地 获取 
下 一 个 元 素 。 


> next (); 
i 


3.6 ”本 章 小 结 


面向 对 象 特 怕 


现在 ,我 们 已 经 完成 了 对 于 


第 3 章 函数 93 


JavaScript 函数 的 基本 概念 介绍 ， 为 今后 学 习 JavaScript 的 


E， 以 及 相关 的 现代 编程 模式 打下 了 一 定 的 基础 。 在 这 之 前 ， 我 们 一 直 在 刻意 


回避 有 关 面 向 对 象 特性 的 内 容 ， 但 往 后 ， 本 书 将 带 您 深入 这 些 更 为 有 趣 的 内 容 。 下 面 ， 让 
我 们 再 来 花 一 点 时 间 回 顾 一 下 本 


多 
多 
多 


定义 和 调用 函数 的 基础 知识 
函数 的 参数 及 其 灵活 性 。 
内 置 函数 一 一 包括 parseIn 


章 所 讨论 的 内 容 。 
您 既 可 以 使 用 函数 声明 语法 , 也 可 以 使 用 函数 表达 式 。 


t()、parseFloat()、isNaN()、 isFinite()、eval() 


以 及 对 URL 执行 编码 、 反 乡 


码 操作 的 四 个 相关 函数 。 


JavaScript 变量 的 作用 域 
及 相关 的 作用 域 链 。 


尽管 这 些 变量 没有 大 括号 级 作用 域 , 但 它 有 函数 作用 域 以 


函数 也 是 一 种 数据 一 一 即 函 


实现 大 量 有 趣 的 应 用 。 例 如 
国 私有 函数 和 私有 变量 。 
图。 匿名 函数 。 

国 ”回调 函数 。 

加 。 即时 函数 。 


国 能 重 写 自 身 的 函数 。 
闭 包 。 


3.7 ”练习 题 


数 可 以 跟 其 他 数据 一 样 被 赋值 给 一 个 变量 ， 我 们 可 以 据 此 


1. 编写 一 个 将 十 六 进 制 值 转换 为 颜色 的 函数 ， 以 蓝 色 为 例 ，#0000FF 应 被 表示 成 
rgb (0,0,255) 的 形式 。 然 后 将 函数 命名 为 getRGB () ， 并 用 以 下 代码 进行 测试 。 提 示 : 
可 以 将 字符 串 视 为 数组 ， 这 个 数组 的 元 素 为 字符 。 
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> Var a = getRGB ("#00FFO 
> a; 
"rgb(0, 255, 0)" 


2. 如 果 在 控制 台中 执行 以 下 各 行 ， 分 别 会 输出 什么 内 


parseInt (lel); 
parseInt('lel'); 
parseFloat('lel'); 
isFinite(0/10); 
isFinite(20/0); 

isNaN (parseInt (NaN) ) ; 


YY YY YY YY 


ns 


3. 下 面 代码 中 ，alert () 强 


Var aa = 1; 


FanCtLon 和 人) 于 
function n() { 
alert (a); 
} 
Var a = 2; 


n(); 


4. 以 下 所 有 示例 都 会 弹 


FE 
到 


Bool " 


恬 
仙 


框 ， 


4.1 


var f alert; 
eval('f ("Boo!™")'); 


4.2 


Var 7 


Var f alert; 
eval('e=f') ('Boo!'); 


4.3 
(function(){ 
return alert; } 
) () ('Boo!'); 


出 的 内 容 会 是 什么 ? 


so 


让 


~ 


中 原因 吗 ? 


第 4 章 
对 象 


到 目前 为 止 ， 我 们 已 经 了 解 了 JavaScript 中 的 基本 数据 类 型 、 数 组 及 函数 ， 
现在 是 时 候 学 习 本 书 最 重要 的 一 部 分 内 容 一 一 对 象 了 。 


在 这 一 章 中 ， 我 们 将 介绍 以 下 内 容 : 
令 ”如 何 创建 并 使 用 对 象 。 

令 ” 什 么 是 构造 器 函数 。 

令 ” JavaScript 中 的 内 置 对 象 及 其 运用 。 


4.1 ”从 数组 到 对 象 


正如 我 们 在 第 2 章 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表 达 式 中 所 介绍 的 ， 数 组 实际 
上 就 是 一 组 值 的 列表 。 该 列表 中 的 每 一 个 值 都 有 自己 的 索引 值 〈 即 数字 键 名 )， 索 引 值 从 0 
开始 ， 依 次 递增 。 例 如 : 


> Var myarr = ['red', 'blue', 'yellow', ‘'purple']; 
> myarr; 
["red" > "plue" "yellow" "purple"] ; 


> myarr[0]; 
mm red" 


> myarr[3]; 
mm purple wm 
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如 果 我 们 将 索引 键 单独 排 成 一 列 ， 再 把 对 应 的 值 排 成 男 一 列 ， 就 会 列 出 这 样 一 个 键 / 
值 表 ， 如 表 4-1 所 示 。 


表 4-1 
索引 键 对 应 值 
0 red 
1 blue 
2 yellow 
3 purple 


事实 上 ， 对 象 的 情况 跟 数 组 很 相似 ， 唯 一 的 不 同 是 它 的 键 值 类 型 是 自 定义 的 。 也 就 是 
， 我 们 的 索引 方式 不 再 局 限于 数字 了 ， 而 可 以 使 用 一 些 更 为 友好 的 键 名 ， 比 如 


， 与 
first name、age 等 。 


下 面 ， 让 我 们 通过 一 个 简单 的 示例 来 看 看 对 象 是 由 哪 几 部 分 组 成 的 : 


福 


Var hero = { 
breed: 'Turtle', 
occupation: "Nin]ja' 


}; 

正如 我 们 所 见 : 

令 ” 这 里 有 一 个 用 于 表示 该 对 象 的 变量 名 hero; 

多 与 定义 数组 时 所 用 的 中 括号 [] 不 同 ， 对 象 使 用 的 是 大 括号 {}; 

令 ”括号 中 用 逗号 分 市 的 是 组 成 该 对 象 的 元 素 ( 通 常 被 称 之 为 属性 ); 
令 ” 键 / 值 对 之 间 用 冒号 分 割 ， 例 如 ，key: value。 


有 了 时候， 我 们 还 可 以 在 键 名 (属性 名 〉 上 面 加 一 对 引号 ， 例 如 ， 下 面 三 行 代码 所 定义 
的 内 容 是 完全 相同 的 : 


We 


Var hero = {occupation: 1}; 
Var hero = {"occupation": 1}; 


var hero (“OGCUpatlion ely: 


常情 况 下 ,我 们 不 建议 您 在 属性 名 上 面 加 引号 (这 也 能 减少 一 些 输入 ), 但 在 以 下 这 
中 ， 


通 
些 情境 中 ， 引 号 是 必须 的 。 
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多 如果 属性 名 是 JavaScript 中 的 保留 字 之 一 的 话 〈 具 体 可 参考 附录 A: 保留 字 ) 
如 果 属 性 名 中 包含 空格 或 其 他 特殊 字符 的 话 ( 包 括 任何 除 人 字母、 数字、 下划线 及 
美元 符号 以 外 的 字符 )。 

令 ”如 果 属 性 名 以 数字 开头 的 话 。 


总 而 言 之 ， 如 果 我 们 所 选 的 属性 名 不 符合 JavaScript 中 的 变量 命名 规则 ， 就 必须 对 其 
施加 一 对 引号 。 
下 面 ， 让 我 们 来 看 一 个 怪异 的 对 象 定义 : 


Var oO = { 
Something: 1, 
'yes or no': 'yes', 
"1@#$%^&*': true 

}; 


虽然 这 个 对 象 的 属性 名 看 起 来 很 另类 ， 但 该 对 象 是 合法 的 ， 因 为 我 们 在 它 的 第 二 和 
第 三 个 属性 名 上 加 了 引号 ， 否 则 一 定 会 出 
在 本 章 稍 后 的 内 容 中 ， 还 会 介绍 除了 [] 和 个 以 外 的 定义 数组 和 对 象 的 方法 。 但 首先 要 
明白 的 是 当前 这 种 方法 的 术语 名 词 : 用 [] 定 义 数组 的 方法 我 们 称 之 为 数组 文本 标识 法 (array 
literal notation), 而 同样 的 , 用 大 括号 他 定义 对 象 的 方法 就 叫做 对 象 文本 标识 法 (object literal 


notation ) 。 
4.1.1 元素、 属性 、 方 法 与 成 员 


说 到 数组 的 时 候 ， 我 们 常 说 其 中 包含 的 是 元 素 。 而 当 我 们 说 对 象 时 ， 就 会 说 其 中 包含 
的 是 属性 。 实 际 上 对 于 JavaScript 来 说 ， 它 们 并 没有 多 大 的 区 别 ， 只 是 在 技术 术语 上 的 表 
达 习 惯 有 所 不 同 罢了 。 这 也 是 它 区 别 于 其 他 程序 设计 语言 的 地 方 。 

另外 ， 对 象 的 属性 也 可 以 是 函数 ， 因 为 函数 本 身 也 是 一 种 数据 。 在 这 种 情况 下 ， 我 们 
称 该 属性 为 方法 。 例 如 下 面 的 talk 就 是 一 个 方法 : 


Var dog = { 
name: 'Benji', 
talk: function(){ 
alert ('Woof, woof!'),; 
} 
}; 
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按照 上 一 章 的 经 验 ， 我 们 也 可 以 像 下 面 这 样 ， 在 数组 中 存储 一 些 函 数 元 素 并 在 需要 时 


调用 它们 ， 但 这 在 实践 中 并 不 多 见 。 
> var a = []; 
> a[0] = function (what) { alert (what); }; 


> a[l0] ('Boo!'); 


有 时 候 您 可 能 还 会 看 到 一 个 对 象 的 属性 指向 另 一 个 对 象 属性 的 情况 。 而 且 所 指向 的 属 
性 也 可 以 是 函数 。 


4.1.2” 哈 希 表 、 关 联 型 数组 
在 一 些 程序 设计 语言 中 ， 通 常 都 会 存在 着 两 种 不 同 的 数组 形式 。 
”一 般 性 数组 ， 也 叫做 索引 型 数组 或 者 枚 举 型 数组 (通常 以 数字 为 键 名 )。 
”关联 型 数组 ， 也 叫做 哈 希 表 或 者 字典 (通常 以 字符 串 为 键 值 )。 


在 JavaScript 中 ， 我 们 会 用 数组 来 表示 索引 型 数组 ， 而 用 对 象 来 表示 关联 型 数组 。 因 
此 ， 如 果 我 们 想 在 JavaScript 中 使 用 哈 希 表 ， 就 必须 要 用 到 对 象 。 


4.1.3 ”访问 对 象 属性 


我 们 可 以 通过 以 下 两 种 方式 来 访问 对 象 的 属性 。 


令 ”中 括号 表示 法 ,例如 hero['occupation']。 


令 ”点 号 表示 法 ,例如 hero.occupation。 


相对 而 言 ， 点 号 表示 法 更 易于 读 写 ， 但 也 不 是 总 能 适用 的 。 这 一 规则 也 适用 于 引用 属 
性 名 ， 如 果 我 们 所 访问 的 属性 不 符合 变量 命名 规则 ， 它 就 不 能 通过 点 号 表示 法 来 访问 。 


接 下 来 ， 让 我 们 通过 hero 对 象 来 学 习 一 下 这 两 种 表示 法 : 


Var hero = { 


breed: 'Turtle', 
occupation: 'Ninja'"' 


}; 


下 面 我 们 用 点 号 表示 法 来 访问 属性 : 


> hero.breed; 
"Turtle" 
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再 用 中 括号 表示 法 来 访问 属性 : 


> hero[l'occupation']; 
"Ninja" 


如 果 我 们 访问 的 属性 不 存在 ， 代 码 就 会 返回 undefinedq。 


> Hair color is 1 + hero.hair color; 


"Hair color is undefined" 


另外 ， 由 于 对 象 中 可 以 包含 任何 类 型 的 数据 ， 自 然 也 包括 其 他 对 象 : 
Var book = { 

name: 'Catch-22', 

published: 1961, 

author: { 


firstname: 'Joseph', 
lastname: "Heller' 


在 这 里 ， 如 果 我 们 想 访 问 book 对 象 的 author 属 1 


el 


生 对 象 的 firstname 属性 ， 就 需 


TH 
如 
休 


> book.author.firstname; 
"Joseph" 


当然 ， 也 可 以 连续 使 用 中 括号 表示 法 ， 例 如 : 


> book['author']['lastname']; 
"Heller" 


tf 至 可 以 混合 使 用 这 两 种 表示 法 ， 例 如 : 


> book.author['lastname']; 
"Heller" 


> book['author'] .lastname; 
"Heller" 


另外 还 有 一 种 情况 ， 如 果 我 们 要 访问 的 属性 名 是 不 确定 的 ， 就 必须 使 用 中 括号 表示 法 
它 允 许 我 们 在 运行 时 通过 变量 来 实现 相关 属性 的 动态 存 取 。 
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> Var key = 'firstname'; 
> pook.author[lkeyl]; 
"Joseph" 


4.1.4 调用 对 象 方法 


由 于 对 象 方法 实际 上 只 是 一 个 函数 类 型 的 属性 , 因此 它们 的 访问 方式 与 属性 完全 相同 ， 
即 用 点 号 表示 法 或 中 括号 表示 法 均 可 。 其 调用 (请求 ) 方式 也 与 其 他 函数 相同 ， 在 指定 的 
方法 名 后 加 一 对 括号 即 可 。 例 如 下 面 的 say 方法 : 


> Var hero = { 


breedy “TUrtLe", 
occupation: 'Ninja', 
say: function() { 
return 'I am ' + hero.occupation; 
} 
}; 
> hero.say(); 
"I am Ninja" 


如 果 调 用 方法 时 需要 传递 一 些 参数 ， 做 法 也 和 一 般 函 数 一 样 。 例 如 : 


> Nerovsav( ar “by Vey 


另外 ， 由 于 我 们 可 以 像 访问 数组 一 样 用 中 括号 来 访问 属性 ， 因 此 这 意味 着 我 们 同样 可 
以 用 中 括号 来 调用 方法 。 


> hero['say'] (); 


使 用 中 括号 来 调用 方法 在 实践 中 并 不 常见 ， 除 非 属 性 名 是 在 运行 时 定义 的 : 


Var method = 'say'; 
hero [methodq] (); 


最 佳 实践 提示 ， 尽 量 别 使 用 引号 〈 除 非 别 无 他 法 ) 
SN 尽量 使 用 点 号 表示 法 来 访问 对 象 的 方法 与 属性 .不 
要 在 对 象 中 使 用 带 引号 的 属性 标识 。 
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4.1.5 ”修改 属性 与 方法 


由 于 JavaScript 是 一 种 动态 语言 ， 所 以 它 允 许 我 们 随时 对 现存 对 象 的 属性 和 方法 进行 
修改 。 其 中 自然 也 包括 添加 与 删除 属性 。 因 此 ， 我 们 也 可 以 先 创 建 一 个 空 对 象 ， 稍 后 再 为 
它 添加 属性 。 下 面 ， 让 我 们 来 看 看 具体 是 怎么 做 的 。 


首先 创建 一 个 “ 空 ”对 象 : 


> var hero = {}; 


“Ze” 对 象 


在 本 节 ， 我 们 构造 了 一 个 “ 空 ” 对 象 : var hero = 
{};。 这 个 “ 室 ” 字 要 打 引 号 ， 因 为 实际 上 这 个 对 象 并 
yy 不 是 空 的 。 虽 然 我 们 并 没有 为 它 定 义 属性 ， 但 它 本 身 
ea 有 一 些 继承 的 属性 。 您 会 在 后 续 章 节 学 习 到 属性 继承 
的 知识 。 当 然 ， 在 ES3 中 ， 对 象 不 可 能 是 空 的 。 然 而 
在 ES5 中 ， 我 们 倒 确 实 是 可 以 真正 创建 一 个 不 继承 任 
何 属性 的 空 对 象 的 。 但 现在 我 们 暂时 还 是 将 这 个 知识 
先 放 一 放 吧 。 


el 
Tr 
寺 
阔 
SR 
六 
3 


这 时 候 ， 如 果 我 们 访问 一 个 不 存在 的 属性 


> typeof hero.breed; 


"undefined" 

现在 ， 我 们 来 为 该 对 象 添 加 一 些 属性 和 方法 : 
> hero.breed = 'turtle'; 

> hero.name = 'Leonardo'; 

> hero.sayName = function() { 


return hero.name; 


}; 


然后 调用 该 方法 : 


> hero.sayName () ， 


"Leonardo" 


接 下 来 ， 我 们 删除 一 个 属性 : 
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> delete hero.name; 
true 


然后 再 调用 该 方法 ， 它 就 找 不 到 name 属性 了 : 


> hero.sayName () ， 
"undefined" 


灵活 的 对 象 


在 JavaScript 中 ,对 象 在 任何 时 候 都 是 可 以 改变 的 ， 

总 例如 增加 、 删 除 、 修 改 属 性 . 但 这 种 规则 也 有 例外 的 情 
况 : 某 些 内 建 对 象 的 一 些 属 性 是 不 可 改变 的 (例如 我 们 

之 后 会 讨论 的 Math.PI)。 另 外 ，ES5 允许 创建 不 可 改变 

的 对 象 。 这 方面 的 更 多 知识 请 参考 府 灵 C， 内 建 戏 妥 。 


4.1.6 ”使 用 this 值 


在 之 前 的 示例 中 ,方法 sayName () 是 直接 通过 hero .name 来 访问 hero 对 象 的 name 
属性 的 。 而 事实 上 ， 当 我 们 处 于 某 个 对 象 的 方法 内 部 时 ， 还 可 以 用 另 一 种 方法 来 访问 同一 
对 象 的 属性 ， 即 该 对 象 的 特殊 值 this。 例 如 : 


> Var hero = { 
name: 'Rafaelo', 
sayName: function() { 
return this.name; 
} 
}; 


> hero.sayName () ， 
"Rafaelo" 


也 就 是 说 ， 当 我 们 引用 this 值 时 ， 实 际 上 所 引用 的 就 是 “这 个 对 象 ”或 者 “当前 
对 象 ”。 


4.1.7 ”构造 句 困 数 


另外 ， 我 们 还 可 以 通过 构造 器 函数 〈constructor function ) 的 方式 来 创建 对 象 。 下 面 来 
看 一 个 例子 : 
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function Hero() 1{ 
this.occupation = 'Ninja'; 


} 


为 了 能 使 用 该 函数 来 创建 对 象 ， 我 们 需要 使 用 new 操作 符 ， 例 如 : 


> Var hero = new Hero(); 
> hero.occupation; 
wm Nin] a" 


使 用 构造 器 函数 的 好 处 之 一 是 它 可 以 在 创建 对 象 时 接收 一 些 参数 。 下 面 ， 我 们 就 来 修 
改 一 下 上 面 的 构造 器 函数 ， 使 它 可 以 通过 接收 参数 的 方式 来 设 定 name 属性 : 


function Hero(name) { 


this.name = name; 

this.occupation = 'Ninja'; 

this.whoAreYou = function() { 
returrn “Tm 汁 


this.name + 
and Lm a 
this.occupation; 
}; 
} 


现在 ， 我 们 就 能 利用 同一 个 构造 器 来 创建 不 同 的 对 象 了 : 


> Var hl = new Hero('Michelangelo'); 
> Var h2 = new Hero('Donatello'); 

> hl.whoAreYou(); 

"I'm Michelangelo and I'm a Ninja" 


> h2.whoAreYou(); 
"I'm Donatello and I'm a Ninja" 


最 佳 实践 
SN 依照 惯例 ， 我 们 应 该 将 构造 器 函数 的 首 字 母 大 写 ， 
以 便 显著 地 区 别 于 其 他 一 般 通 数 。 


如 果 我 们 在 调用 一 个 构造 器 函数 时 忽略 了 new 操作 符 ， 尽 管 代码 不 会 出 错 ， 但 它 的 行 
为 可 能 会 令 人 出 乎 预料 ， 例 如 : 
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> Var h = Herol 
> typeof h; 
"undefined" 


'Leonardo'); 


能 看 出 来 上 面 发 生 了 什么 吗 ? 由 于 这 里 没有 使 用 new 操作 符 ， 
个 新 的 对 象 。 这 个 函数 调用 与 其 他 函数 并 没有 区 别 , 这 里 的 bh 值 应 该 就 是 该 函数 的 返回 值 。 
而 由 于 该 函数 没有 显 式 返 回 值 ( 它 没有 使 用 关键 字 return)， 所 以 它 实 际 上 返回 的 是 


undefined 值 ， 并 将 该 值 赋值 给 了 nh。 
那么 ， 在 这 种 情况 下 this 引 


4.1.8 全 局 对 象 


之 前 ， 我 们 已 经 讨论 过 全 局 变量 


《以 及 应 该 如 何 避 免 使 用 它们 )》 和 JavaScript 程序 在 


j 的 是 什么 呢 ? 答案 是 全 局 对 象 。 


因此 我 们 不 是 在 创建 一 


宿主 环境 《〈 例 如 浏览 器 ) 中 的 有 具体 运行 情况 。 现 在 ， 我 们 又 学 习 了 对 象 的 相关 知识 ， 是 时 


事实 上 ， 程 序 所 在 的 宿主 环境 一 般 都 会 为 其 提供 


候 了 解 一 些 真相 了 : 习 


谓 的 全 局 变量 其 实 都 只 不 过 是 该 对 象 


的 属性 罢了 。 


一 个 全 局 对 象 ， 而 所 


象 就 是 window。 另 
是 


同样 有 效 ) 


局 代码 部 分 这 


例如 当 程 序 的 宿主 环境 是 Web 浏览 器 时 ， 它 所 提供 的 全 局 对 

一 种 获取 全 局 对 象 的 方法 (这 种 方法 在 浏览 器 以 外 的 大 多 数 其 他 环境 也 

在 构造 器 函数 之 外 使 用 this 关键 字 。 例 如 ， 可 以 在 任何 函数 之 外 的 全 

么 做 。 
下 面 ， 我 们 来 看 一 个 具体 示例 。 首 先 ， 我 们 在 所 有 函数 之 外 声明 一 个 全 局 变量 ， 例 如 : 
> Var a= 1 


然后 ， 我 们 就 可 以 通过 


令 ”可 以 当做 一 个 变量 a 来 访问 。 


I 


令 果 
令 可 以 通过 th 
> Var a= 1; 


> window.a; 
1 


ha 


is 所 指向 的 全 


局 对 象 属性 来 访问 。 例 如 : 


' 不 同 的 方式 来 访问 该 全 局 变量 了 。 


以 当做 全 局 对 象 的 一 个 属性 来 访问 ， 例 如 window["'a'] 或 者 window.a。 
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现在 ， 让 我 们 回 过 头 去 分 析 一 下 刚才 那个 不 使 用 new 操作 符 调 用 构造 器 函数 的 情况 ， 
那 时 候 , this 值 指 向 的 是 全 局 对 象 ,并 且 所 有 的 属性 设置 都 是 针对 this 所 代表 的 winqow 
对 象 的 。 

也 就 是 说 ， 当 我 们 声明 了 一 个 构造 函数 ， 但 又 不 通过 new 来 调用 它 时 ， 代 码 就 会 返回 


undefined: 


| 


> function Hero(name) { 
this.name = name; 
} 
> Var h = Hero('Leonardo');) 
> typeof h; 
"undefined" 


> typeof h.name; 
TypeError: Cannot read property 'name' of undefined 


由 于 我 们 在 Hero 中 使 用 了 this, 所 以 这 里 就 会 创建 一 个 全 局 变量 (同时 也 是 全 局 对 
象 的 一 个 属性 ): 


> name; 
"Leonardo" 


> window.name; 
"Leonardo" 


而 如 果 我 们 使 用 new 来 调用 相同 的 构造 器 函数 , 我 们 就 会 创建 一 个 新 对 象 , 并 且 this 
也 会 自动 指向 该 对 象 : 


> Var h2 = new Hero('Michelangelo'); 
> typeof h2; 
"object" 


> h2.name; 
"Michelangelo" 


除 此 之 外 ， 我 们 在 第 3 章 : 函数 所 见 的 那些 函数 也 都 可 以 当做 wingow 对 象 方法 来 调 
]， 例 如 下 面 两 个 调用 的 效果 完全 相同 : 


> parseInt('101 dalmatians'); 
101 


106 JavaScript 面向 对 象 编程 指南 (第 2 版 ) 


> windqow.pParseInt ('101 dalmatians'); 
101 


> this.parseInt ('101 dalmatians'); 
101 


4.1.9 ”构造 器 属性 


并 且 ， 如 果 在 所 有 函数 之 外 ， 这 样 使 用 也 是 可 以 的 : 


当 我 们 创建 对 象 时 ， 实 际 上 同时 也 赋予 了 该 对 象 一 种 特殊 的 属性 一 一 即 构造 器 属性 


(constructor property)。 该 属性 实际 上 是 一 个 指向 月 
例如 ， 我 们 继续 之 前 的 例子 : 


> h2.constructor; 
function Hero (name) { 
this.name = name; 


} 
当然 ， 由 于 构造 器 属性 所 引用 的 是 一 个 函数 ， 


心 | 


建 男 一 个 对 象 ” 


于 创建 该 对 象 的 构造 器 函数 的 引用 。 


因 ] 


比 我 们 也 可 以 利用 它 来 创建 一 个 其 他 


> Var h3 = new h2.constructor('Rafaello');) 


> h3.name; 
"Rafaello" 


新 对 象 。 例 如 像 下 面 这 样 ， 大 意 就 是 :“ 无 论 对 象 h2 有 没有 被 创建 ， 我 们 都 可 以 用 它 来 创 


另外 ， 如 果 对 象 是 通过 对 象 文本 标识 法 所 创建 的 ， 那 么 实际 上 它 就 是 由 内 建构 造 器 


Object () 函数 所 创建 的 〈 关 于 这 一 点 ， 我 们 稍 后 还 会 


于 做 详细 介绍 )。 


> Var oO = {}; 
> o.constructor; 


function Object(){ [native code] } 


> typeof o.constructor; 


"function" 


4.1.10 ”instanceof 操作 符 


通过 instanceof 操作 符 ， 我 们 可 以 测试 一 个 对 象 是 不 是 由 某 个 指定 的 构造 器 函数 所 
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创建 的 。 例 如 : 


> function Hero(){} 

> Var h = new Hero(); 
> Var oO = {}; 

> h instanceof Hero; 


true 


> h instanceof Object; 
true 


> o instanceof Object; 


true 


请 注意 ， 这 里 的 函数 名 后 面 没有 加 括号 〈 即 不 是 h instanceof Hero () )， 因 为 这 
里 不 是 函数 调用 ， 所 以 我 们 只 需要 像 使 用 其 他 变量 一 样 ， 引 用 该 函数 的 名 字 即 可 。 


4.1.11 返回 对 象 的 函数 


除了 使 用 new 操作 符 调 用 构造 器 函数 以 外 , 我 们 也 可 以 抛 开 new 操作 符 ， 只 用 一 般 函 
数 来 创建 对 象 。 这 就 需要 一 个 能 执行 某 些 预 备 工 作 ， 并 以 对 象 为 返回 值 的 函数 。 


例如 ， 下 面 就 有 一 个 用 于 产生 对 象 的 简单 函数 factory () : 


function factory (name) { 
return { 
name: name 
}; 
} 


然后 我 们 调用 factory () 来 生成 对 象 : 


> Var oO = factory('one'); 


> OCONStructor 
function Object(){ [native code] } 


实际 上 ， 构 造 器 函数 也 是 可 以 返回 对 象 的 ， 只 不 过 在 this 值 的 使 用 上 会 有 所 不 同 。 
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这 意味 着 我 们 需要 修改 构造 器 函数 的 默认 行为 。 下 面 ， 我 们 来 看 看 具体 是 怎么 做 的 。 


这 是 构造 器 的 一 般 用 法 : 


> function C() { 
this.a = 1; 
} 
> Var c = new C(); 
> 
1 


但 现在 要 考虑 的 是 这 种 用 法 : 


> ENGtLGHTC2(), Af 
this.a = 1; 
return {b: 2}; 
} 
> Var c2 = new C2(); 
> typeof c2.a; 


"undefined" 


2 
2 


能 看 出 来 发 生 了 什么 吗 ? 在 这 里 ， 构 造 器 返回 的 不 再 是 包含 属性 a 的 this 对 象 ， 而 


是 另 一 个 包含 属性 b 的 对 象 "。 但 这 也 只 


在 函数 的 返回 值 是 一 个 对 象 时 才 会 发 生 , 而 当 我 


们 企图 返回 的 是 一 个 非 对 象 类 型 时 ， 该 构造 器 将 会 照常 返回 this。 


关于 对 象 在 构造 器 函数 内 部 是 如 何 创建 出 来 的 ， 您 可 以 设想 在 函数 开头 处 存在 一 个 叫 


做 this 的 变量 ， 
Ct ONGC) Hf 

// var this = 
this.a = 1; 

// return this; 


} 


4.1.12 ”传递 对 象 


当 我 们 拷贝 某 个 对 象 或 者 将 它 传递 给 茶 个 函数 时 ， 往 往 传 递 的 都 是 该 对 象 的 引用 。 因 


return 语句 中 使 


的 是 大 括号 ， 


DO 症 兰 
注 束 ， 


也 就 是 说 {b:2} 是 一 个 独立 的 对 象 。 一 一 译 者 注 


这 个 变量 会 在 函数 结束 时 被 返回 ， 就 像 这 样 : 


{}; //pseudo code, you can't do this 


此 我 们 在 引用 上 所 做 的 任何 改动 ， 实 际 上 都 会 影响 它 所 引 


在 下 面 的 示例 中 ， 我 们 将 会 看 到 对 象 是 如 何 赋值 给 另 
该 变量 做 一 些 改变 操作 的 话 ， 原 对 象 也 会 跟着 被 改变 : 


> Var original = {howmany: 1}; 
> var mycopy = original; 

> mycopy.howmany; 
1 


> mycopy.howmany = 100; 
100 


> original.howmany; 
100 


同样 的 ， 将 对 象 传递 给 函数 的 情况 也 大 抵 如 此 : 


Var original = {howmany: 100}; 
Var nullify = function(o) {o.howmany = 0;} 


人 

> nullify(original); 
> original.howmany; 
0 


4.1.13 ”比较 对 象 


的 原 对 象 。 


个 变 和 


竺 的 ， 
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并 且 ， 如 果 我 们 对 


当 我 们 对 对 象 进行 比较 操作 时 ， 当 且 仪 当 两 个 引用 指向 同一 个 对 象 时 ， 结 果 为 true。 
而 如 果 是 不 同 的 对 象 ， 即 使 它们 碰巧 拥有 相同 的 属性 和 方法 ， 比 较 操 作 也 会 返回 false。 


下 面 ， 我 们 来 创建 两 个 看 上 去 完全 相同 的 对 象 : 


> var fido = {breed: 'dog'}; 
> var benji = {breed: 'dog'}; 


然后 ， 我 们 对 它们 进行 比较 ， 操 作 将 会 返回 false: 


> benji === fido; 
false 
> ben]ji == fido; 
false 


我 们 可 以 新 建 一 个 变量 mydog， 并 将 其 中 一 个 对 象 赋值 给 它 。 


上 就 指向 了 这 个 变量 。 


这 样 一 来 mydog 实际 
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> var mydog = benji; 


在 这 种 情况 下 ， mydog 每 benji 所 指向 的 对 象 是 相同 的 〈 也 就 是 说 ， 改 变 mydog 的 
属性 就 等 同 于 改变 benji)， 比 较 操作 就 会 返回 true。 


> mydog === benji; 
true 


并 且 ， 由 于 fido 是 一 个 与 mydog 不 同 的 对 象 ， 所 以 它 与 mydog 的 比较 结果 仍 为 


false: 


> mydog === fido; 
false 


4.1.14 ”Webkit 控制 台中 的 对 象 


在 进一步 深入 介绍 JavaScript 的 内 建 对 象 之 前 ， 让 我 们 先 来 了 解 一 些 对 象 在 Webkit 控 
制 台中 的 工作 情况 。 
到 目前 为 止 ， 我 们 已 经 在 本 章 中 测试 了 许多 示例 ， 您 应 该 已 经 注意 到 了 对 象 在 控制 台 
A 


中 的 显示 方式 。 如 果 我 们 想 要 创建 一 个 对 象 ， 只 需要 在 控制 台中 输入 它 的 名 字 并 按 Enter， 
后 者 就 会 返回 一 个 单词 Object。 


该 单词 就 代表 了 我 们 的 新 对 象 ， 它 前 面 还 有 一 个 箭头 。 用 鼠标 单 击 这 个 对 象 可 以 展开 
它 的 属性 。 如 果菜 个 属性 的 值 仍然 是 个 对 象 ， 我 们 就 可 以 反复 地 点 击 展开 它 。 展 开 操作 可 
以 帮助 您 了 解 对 象 内 部 具体 有 哪些 属性 。 如 图 4-1 所 示 。 


二 


四 日 日 Developer Tools - http:/ /www.phpied.com/files/imaje/verbose.html ww 
SS OLE2 
Elements Resources Network Scripts Timeline Profiles Audits Console Search Console 
> var benji = {name: 'Benji'，breed: 'dog', obj: {prop: 1}}; 
undefined 
> i 
了 0bject 
et "dog" 
"Benji 
ye 全 
prop: 
pb__pr _: Object 
人 _ pr rs: Object 
> 
国 | 污 QIGI<topframe> ;| 《0 Errors Warnings Logs Ee 
| | 


图 4-1 
您 可 以 暂时 忽略 “proto 属性。 下 一 章 我 们 会 具体 解释 该 属性 。 


el 
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console.log 

另外 ， 控 制 台 还 为 我 们 提供 了 一 个 叫做 console 的 对 象 和 一 系列 的 方法 ， 例 如 
console.log() 和 console.ertror () 。 通 过 这 些 函 数 ， 如 图 4-2 所 示 ， 我 们 可 以 在 控 
制 台 中 显示 我 们 想 要 查看 的 值 。 


四 日 日 Developer Tools - http:/ /www.phpied.com/files/imaje/verbose.html 5 


Elements Resources Network Scripts Timeline Profiles Audits Search Console 
; “abc")s 
re og 
Nam nji 
o C 
3 和 ct 
undefir 
> consol pe h!') 
@ pouch! 
undefin 
?| 
加 痊 Qg top fram Errors Warnings Logs @@1 插 
图 4-2 


其 中 ，console.1og() 既 可 以 在 我 们 想 进 行 某 种 快速 测试 时 提供 一 些 便利 ， 也 可 以 
在 我 们 处 理 某 些 真实 脚本 时 记录 一 些 中 间 调 试 信息 。 例 如 在 下 面 这 个 例子 中 ， 我 们 示范 了 
如 何在 循环 中 使 用 该 函数 : 


> for(var i = 0; i < 5; i++) { 


console.1log (i); 


} 


WNPDPO 


4.2 ”内 建 对 象 


到 目前 为 止 ， 本 章 所 使 用 的 实际 上 都 是 object () 构造 器 函数 ， 它 会 在 我 们 使 用 对 象 
文本 标识 法 ， 或 访问 相关 构造 器 属性 时 返回 新 建 的 对 象 。object () 只 是 JavaScript 中 众多 
内 建构 造 器 之 一 ， 在 本 章 接 下 来 的 内 容 中 ， 我 们 将 会 为 您 一 一 介绍 其 余 的 内 建构 造 器 。 


内 建 对 象 大 致 上 可 以 分 为 三 大 类 。 
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9 数据 封装 类 对 象 一 一 包括 Object、Array、Boolean、Number 和 String。 
这 些 对 象 代表 着 JavaScript 中 不 同 的 数据 类 型 ， 并 有 旦 都 拥有 各 自 不 同 的 typeof 
返回 值 (这 点 我 们 在 第 2 章 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表 达 式 中 讨论 过 )， 
以 及 undefined 和 null 状态 。 
工具 类 对 象 一 一 包括 Math、Date、RegExp 等 用 于 提供 便利 的 对 象 。 
令 ”错误 类 对 象 一 一 包括 一 般 性 错误 对 象 以 及 其 他 各 种 更 特殊 的 错误 类 对 象 。 它 们 可 
以 在 某 些 异常 发 生 时 帮助 我 们 纠正 程序 工作 状态 。 
在 本 章 ， 我 们 只 讨论 这 些 内 建 对 象 的 一 小 部 分 方法 。 如 果 想 获得 更 完整 的 资料 ， 读 者 
可 以 参考 附录 C: 内 建 对 象 中 的 内 容 。 
另外 值得 一 提 的 是 ， 不 要 去 纠结 什么 是 内 建 对 象 ， 什 么 是 内 建构 造 器 ， 实 际 上 它们 是 
一 回 事 。 要 不 了 多 久 您 就 会 明白 ， 无 论 是 函数 还 是 构造 器 函数 ， 最 后 都 是 对 象 。 


4.2.1 Object’ 


Object 是 JavaScript 中 所 有 对 象 的 父 级 对 象 , 这 意味 着 我 们 创建 的 所 有 对 象 都 继承 于 
此 。 为 了 新 建 一 个 空 对 象 ， 我 们 既 可 以 用 对 象 文 本 标识 法 也 可 以 调用 object () 构造 器 函 
数 ， 即 下 面 这 两 行 代码 的 执行 结果 是 等 价 的 : 


> var o = {}; 
> var o = new Object(); 


我 们 之 前 提 到 过 ， 所 谓 的 “ 空 ”对 象 ， 实 际 上 并 非 是 完全 无 用 的 ， 它 还 是 包含 了 一 些 
继承 来 的 方法 和 属性 的 。 在 本 书 中 ,“ 空 ”对 象 指 的 是 像 们 这 种 除 继承 来 的 属性 之 外 ， 不 含 
任何 自身 属性 的 对 象 。 下 面 ， 我们 就 带 您 来 看 看 之 前 所 创建 的 “ 空 ”对 象 o 中 的 部 分 属性 。 


令 ”0o.constructor: 返回 构造 器 函数 的 引用 。 
令 ”o.toString(): 返回 对 象 的 描述 字符 串 。 
令 ”o.valueOf0: 返回 对 象 的 单 值 描述 信息 ， 通 常 返回 的 就 是 对 象 本 身 。 
下 面 ， 我 们 来 实际 应 用 一 下 这 些 方法 。 首 先 创建 一 个 对 象 : 


> var o = new Object () ， 


然后 调用 toString () 方 法 ， 返 回 该 对 象 的 描述 字符 串 : 


于 这 本 身 就 是 一 个 JavaScript 对 象 的 名 称 ， 这 里 就 不 进行 翻译 处 理 了 。 一 一 译 者 注 
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>>"0tOStrinog(); 
" [object Object]" 


toStzing () 方 法 会 在 某 些 需要 用 字符 串 来 表示 对 象 的 时 候 被 JavaScript 内 部 调用 。 
例如 alert () 的 工作 就 需要 用 到 这 样 的 字符 串 。 所 以 ， 如 果 我 们 将 对 象 传递 给 了 一 个 
alert () 函数 ，tosString () 方 法 就 会 在 后 台 被 调用 ， 也 就 是 说 ， 下 面 两 行 代码 的 执行 结 
果 是 相同 的 : 


> alert(o) ， 
> aletrt(o.toString() ) ， 


另外 ， 字 符 串 连接 操作 也 会 使 用 字符 串 描述 文本 ， 如 果 我 们 将 某 个 对 象 与 字符 串 进 行 
连接 ， 那 么 该 对 象 就 先 调用 自身 的 tostring () 方 法 : 


> "An object: " + o; 
"An object: [object Object]" 


valueof () 方 法 也 是 为 所 有 对 象 共 有 的 一 个 方法 。 对 于 简单 对 象 ( 即 以 object () 
为 构造 器 的 对 象 ) 来 说 ，valLueoEf () 方 法 所 返回 的 就 是 对 象 自己 。 


> o.valueOf () === 0o;) 
true 


总 而 言 之 : 

令 ”我 们 创建 对 象 时 既 可 以 用 var o = {} 的 形式 ( 即 执行 对 象 文本 标识 法 ， 我 们 比 
较 推荐 这 种 方法 )， 也 可 以 用 var o = new Object () ; 

令 ”无 论 是 多 复杂 的 对 象 , 它 都 是 继承 自 object 对 象 的 , 并 且 拥 有 其 所 有 的 方法 ( 例 
如 toString() ) 和 属性 (例如 constructor)。 


4.2.2 Array 


Array () 是 一 个 用 来 构建 数组 的 内 建构 造 器 函数 ， 例 如 : 


> Var a = new Array(); 


这 与 下 面 的 数组 文本 标识 法 是 等 效 的 : 


> Var a = []; 
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无 论 数组 是 以 什么 方式 创建 的 ， 我 们 都 能 照常 往 是 


> a[0] = 1; 
> a[1] = 2;，; 
> ks 

[1, 2] 


当 我 们 使 用 Array () 构造 器 创建 新 数组 时 ， 也 可 以 通过 传 值 的 方式 为 其 设 定 元 素 。 


> var a = new Array(l1,2,3,'fou 
> a; 
[1, 2, 3, "four"] 


r'); 


但 是 如 果 我 们 传递 给 该 构造 器 的 是 
会 被 认为 是 数组 的 长 度 。 
> Var a2 = new Array(5); 


> 
[undefined x 5] 


既然 数组 是 由 构造 器 来 创建 的 ， 那 么 这 是 否 意味 着 数组 实际 上 是 一 个 对 象 呢 ? 的确 
一 下 > 


此 ， 我 们 可 以 用 typeof 操作 符 来 验证 


> ypeoGEally. 27 3] 
"object" 


由 于 数组 也 是 对 象 ， 那 么 就 说 明 它 也 继承 了 Object 的 所 有 方法 和 属性 


> var a = [ly 2 3 four™];» 
atoOdtELng(): 
"1,2,3,four" 


> a.valueof () ， 
[Ll 27 335 fou"] 


dCONstruCtors 
function Array(){ [native code 


尽管 数组 也 是 一 种 对 象 ， 但 还 是 有 一 些 特殊 之 处 ， 因 
首 自动 生成 数值 


令 数组 的 属性 名 是 从 0 开始 递增 ， 


] 1} 


令 ” 数 组 拥有 一 个 用 于 记录 元 素数 时 


的 leng 


th 属性 ; 


个 单独 数字 ， 就 会 H 


为 : 


有 添加 元 素 : 


H 现 一 


异常 情况 ， 即 该 数值 


如 


为 


$b 部 
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令 数组 在 父 级 对 象 的 基础 上 扩展 了 更 多 额外 的 内 建 方法 。 
下 面 来 实际 验证 一 下 对 象 与 数组 之 间 的 区 别 ， 让 我 们 从 创建 空 对 象 和 空 数组 a 开始 : 


Var. A Sy O32 


首先 ， 定 义 数组 对 象 时 会 自动 生成 一 个 length 属性 。 而 这 在 一 般 对 象 中 是 没有 的 : 


> a.length; 
0 


> typeof o.length; 
"undefined" 


在 为 数组 和 对 象 添加 以 数字 或 非 数 字 为 键 名 的 属性 操作 上 , 两 者 间 并 没有 多 大 的 区 别 : 


> a[0] = 1; 
> o[0] = 1; 
> a.prop = 2; 
> o.prop = 2; 


length 属性 通常 会 随 着 数字 键 名 属性 的 数量 而 更 新 ， 而 忽略 非 数字 键 名 属性 : 


十 | 


> a.length; 


我 们 也 可 以 手动 设置 length 属性 。 如 果 设 置 的 值 大 于 当前 数组 中 元 素数 量 ， 剩 下 的 
分 会 被 自动 创建 〈 值 为 undqefined) 的 空 元 素 所 填充 : 


a.length = 5; 


ar 


> 
5 
> 
[1, undefined x 4] 


而 如 果 我 们 设置 的 length 值 小 于 当前 元 素数 ， 多 出 的 那 部 分 元 素 将 会 被 移 除 : 


> a.length = 2; 

2 

> ay; 

[1, undefined x 1] 


一 些 数组 方法 
除了 从 父 级 对 象 那 里 继承 的 方法 以 外 ， 数 组 对 象 中 还 有 一 些 更 为 有 用 的 方法 ， 例 如 
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sort()、join() 和 slice() 


下 面 ， 我 们 将 通过 


> var a by 'test"' 


]; 


push () 方法 会 在 数组 的 末端 添加 
也 就 是 说 a.push ( 就 相当 于 
a.length-- 的 结果 相同 。 


另外 ，push () 返回 


("new") 


> a.push('new'); 


个 前 


Ny 


a 


[a .length] 


等 《完整 的 方法 列表 见 房 巡 C:， 认 苇 诱 流 )。 
一 个 数组 来 试验 一 下 这 些 方法 : 


折 元 素 ， 而 pop () 方法 则 会 移 除 最 后 一 个 元 素 ， 


"new"， 而 a.pop() 则 与 


的 是 改变 后 的 数组 长 度 ， 而 pop 所 返回 的 则 是 被 移 除 的 元 素 。 


回 排序 后 的 数组 ， 在 下 面 的 示例 中 ， 


6 

> a 

[3, 5, 1, 7, "test", "new"] 

> a.pop() 

"new" 

> 

E35 17. 7- "test"] 

而 sort () 方 法 则 是 用 于 给 数组 排序 的 ， 它 会 返 
排序 完成 后 ，a 和 b 所 指向 的 数组 是 相同 的 : 

> Var b = a.sort(); 

> 

[L357 7 “test"] 

> a === b; 

true 

join() 方 法 会 返回 一 个 由 目标 数组 中 所 有 


通过 该 方法 的 参数 来 设 定 这 些 元 素 之 间 月 


> a.join(' is not '); 


元 素 值 用 逗号 连接 而 成 的 字 
什么 字符 〈 串 〉 连接。 例如 ;: 


符 串 , 我 们 可 以 


"1 is not 3 is not 5 is not 7 is not test" 


) 方法 会 在 不 修改 目 


slicel 


位 置 将 日 


日 slice() 


标 数组 的 情况 下 返回 
的 头 两 个 参数 来 指定 (都 以 0 为 基数 )。 


I 


中 的 茶 个 片段 ， 该 片段 的 首尾 索引 


lice(1, 3); 


lice(0, 1); 


lice(0, 2); 


所 有 的 截取 完成 之 后 ， 原 数组 的 状态 不 变 : 


> a;’ 


[1, 3, 5, 7, "test"] 


splice () 则 是 会 修改 目标 数组 的 。 它 会 移 除 并 返 
它 还 会 用 指定 的 新 元 素来 填补 被 切除 的 空缺 。 该 方法 的 
的 首尾 索引 位 置 ， 其 他 参数 则 用 于 填补 的 新 元 素 值 。 


> b 
[3，5] 


= a.Splice(1I1，2，100，101，102) ， 


> a; 


[1, 100, 101, 102, 7, "test"] 


十 


补 空 缺 的 


可 


所 元 素 是 可 选 的 ， 我 们 也 可 


六 


> a.Splice(1， 
[100, 101, 


3); 
102] 


> a; 


[1, 7, "test"] 


4.2.3 Function 


之 前 ， 我 们 已 经 了 解 了 函数 是 一 种 特殊 的 数据 类 型， 


是 一 种 对 象 。 函 数 对 象 的 内 建构 造 器 是 Function ()， 
选 方式 〈 但 我 们 并 不 推荐 这 种 方式 )。 


下 面 展示 了 三 种 定义 函数 的 方式 : 


> function sum(a b) 


return a + b; 


第 4 章 对 象 117 


| 


指定 切片 ， 在 可 选 情况 下 ， 
头 两 个 参数 所 指定 的 是 要 移 除 切 片 


以 直接 跳 过 : 


但 事实 还 远 不 止 如 此 ， 它 实际 上 
你 可 以 将 它 作 为 创建 函数 的 一 种 备 


{ // function declaration 
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VOD 


些 参数 可 以 是 一 个 由 逗号 分 割 而 成 的 单列 表 ， 所 以 ， 下 面 例子 
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> Var sum = function(a, b) 
return a + b; 
}; 
Sn; 2) 


> Var sum = new Function('a', 'b', 
> sum(l1, 2) 


如 果 我 们 使 用 的 是 Function () 构造 器 的 话 ， 就 必须 要 通过 参数 传递 的 方式 来 设 定 函 
数 的 参数 名 通常 是 用 字符 串 〉 以 及 函数 体 中 的 代码 (也 是 用 字符 串 )。JavaScript 引擎 自 
会 对 这 些 源 代码 进行 解析 "， 并 随即 创建 新 函数 ， 这 样 一 来 ， 就 会 带 来 与 sval () 相似 的 缺 


{ // function expression 


'return a + by ); 


因此 我 们 要 尽量 避免 使 用 Function () 构造 器 来 定义 函数 。 


如 果 您 一 定 想 用 Function () 构造 器 来 创建 


> Var first = new Eunction( 
a CD: Cu Ey 
'return arguments;'" 
); 
> firStlLy2 3 4); 
bl; 227 37,4] 


> Var second = new Eunction (人 
a FC 
‘qd', 
'return arguments;'" 
); 
> second(1,2,3,4); 
[1 2 37 有] 


> Var third = new Eunction 
"av 
区 
Mery 


是 因为 JavaScript 引擎 无 法 检查 字符 串 〈 即 您 所 传递 的 参数 ) 中 的 内 容 。 一 一 译 者 注 


的 这 些 函数 定义 是 相同 的 : 
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Ee 
'return arguments;'" 
); 
Sthird(l/ 2 3 
[1, 2, 3, 4] 


最 佳 实践 


Nt 请 尽量 避免 使 用 Function0 构 造 器 。 因 为 它 与 
ea eval() 和 setTimeout() (关于 该 函数 的 讨论 ， 我 们 稍 
后 会 看 到 ) 一 样 ， 始 终 会 以 字符 串 的 形式 通过 JavaScript 
的 代码 检查 。 


4.2.3.1 函数 对 象 的 属性 


与 其 他 对 象 相同 的 是 ， 函 数 对 象 中 也 含有 名 为 constructor 的 属性 ， 其 引用 的 就 是 
Eunction () 这 个 构造 器 函数 。 


> function myfunc (a) { 
EEtULN 
} 
> myfunc.constructor; 
function Function(){[native code]} 


另外， 函数 对 象 中 也 有 一 个 length 属性 ， 用 于 记录 该 函数 声明 时 所 决定 的 参数 数量 。 


> function myfunc(a, b, c){ 
return true; 


} 
> myfunc.length; 
3 


prototype 属性 

prototype 属性 是 JavaScript 中 使 用 得 最 为 广泛 的 函数 属性 。 我 们 将 会 在 下 一 章 中 衣 
I 介绍 它 ， 现 在 只 是 做 个 简单 说 明 : 

4 每 个 函数 的 Prototype 属性 中 都 指向 了 一 个 对 象 ; 

令 ” 它 只 有 在 该 函数 是 构造 器 时 才 会 发 挥 作用 ; 

多” 该 函数 创建 的 所 有 对 象 都 会 持 有 一 个 该 prototype 属性 的 引用 ， 并 可 以 将 


| 
1 


We 


I 
. 
ls 
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做 自身 的 属性 来 使 用 。 


下 面 ， 我 们 来 演示 一 下 prototype 属性 的 使 用 。 先 创建 一 个 简单 对 象 ， 对 象 中 只 有 
一 个 name 属性 和 一 个 say () 方法 : 


0 


Ee 


var ninja = { 
name: 'Ninja', 
say: function()f{ 
return 'I am a ' + this.name; 
} 
}; 


这 方面 的 验证 很 简单 ， 因 为 任何 一 个 新 建 函 数 〈 即 使 这 个 函数 没有 函数 体 ) 中 都 会 有 
一 个 prototype 属性 ， 而 该 属性 会 指向 一 个 新 对 象 。 
> function F(){} 


> typeof F.prototype; 
"object" 


如 果 我 们 现在 对 该 prototype 属性 进行 修改 ， 就 会 发 生 一 些 有 趣 的 变化 : 当前 
默认 的 空 对 象 被 直接 替换 成 了 其 他 对 象 。 下 面 我 们 将 变量 ninja 赋值 给 这 个 
prototype: 


> F.prototype = ninja; 


现在 ， 如 果 我 们 将 F () 当做 一 个 构造 器 函数 来 创建 对 象 baby_ninja， 那 么 新 对 象 
baby_ninja 就 会 拥有 对 下 .prototype 属性 (也 就 是 ninja) 的 访问 权 。 


> Var baby ninja = new F(); 
> baby ninja.name; 
wm Nin] a" 


> baby ninja.say(); 
"I am a Ninja" 


关于 prototype 属性 的 更 多 内 容 ， 我 们 将 会 在 后 续 章 节 中 继续 讨论 。 实 际 上 下 一 整 
章 都 是 与 此 相关 的 内 容 。 

4.2.3.2 ”函数 对 象 的 方法 

所 有 的 函数 对 象 都 是 继承 自 顶 级 父 对 象 Object 的 ,因此 它 也 拥有 Object 对 象 的 方法 。 


例如 toString ()。 当 我 们 对 一 个 函数 调用 tostring () 方法 时 ， 所 得 到 的 就 是 该 函数 的 
源 代码 。 
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2. function myfune(a, Db -Ce) 雯 
return a+b+aoe; 
} 
> myfunc.toString () ; 
"function myfunc(a, b, c) { 
return aa + b+ c， 


}" 


但 如 果 我 们 想 用 这 种 方法 来 查看 那些 内 建 函 数 的 源码 的 话 ， 就 只 会 得 到 一 个 毫 无 用 处 


的 字符 串 [native code]。 


法 ， 


> ParseInt.toString () ， 
"function parseInt() {[native code]}" 


如 您 所 见 ， 我 们 可 以 用 tostring0 函 数 来 区 分 本 地 方法 和 自 定义 方法 。 


-» toString() 方 法 的 行为 与 运行 环境 有 关 ， 浏 览 器 之 
a 间 也 会 有 差异 ， 比 如 空格 和 空 行 的 多 少 。 


4.2.3.3 call() 与 apply() 


在 JavaScript 中 ， 每 个 函数 都 有 calL10 和 appLy0O 两 个 方法 ， 您 可 以 用 它们 来 触发 函 
并 指定 相关 的 调用 参数 。 


此 外 ， 这 两 个 方法 还 有 另外 一 个 功能 ， 它 可 以 让 一 个 对 象 去 “借用 ” 另 一 个 对 象 的 方 
并 为 已 所用。 这 也 是 一 种 非常 简单 而 实用 的 代码 重用 。 


下 面 我 们 定义 一 个 some_obj 对 象 ， 该 对 象 中 有 一 个 say () 方法 ; 


Var Some obj = { 
name: 'Ninja', 
say: function (who) { 
return "Haya /+ who + ' Iama ' + this.name; 
} 
}; 


这 样 一 来 ， 我 们 就 可 以 调用 该 对 象 的 say () 方法， 并 在 其 中 使 用 this .name 来 访问 


其 name 属性 了 : 


> some obj.say('Dude'); 
"Haya Dude, I am a Ninja" 
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下 面 ， 我 们 再 创建 一 个 my_obj 对 象 ， 它 只 有 一 个 name 属性 : 


> var my _ obj = {name: 'Scripting guru'}; 


显然 ,some obj 的 say () 方 法 也 适用 于 my _obj, 因 此 我 们 希望 将 该 方法 当做 my_obj 
自身 的 方法 来 调用 。 在 这 种 情况 下 ， 我 们 就 可 以 试 试 say () 函数 中 的 对 象 方法 call (): 


> some obj.say.call (my obj, 'Dude'); 
"Haya Dude, I am a Scripting guru" 


成 功 了 ! 但 您 明白 这 是 怎么 回 事 吗 ? 由 于 我 们 在 调用 say () 函数 的 对 象 方法 call () 
时 传递 了 两 个 参数 : 对 象 my_obj 和 字符 串 "Dude"。 这 样 一 来 ， 当 say () 被 调用 时 ， 其 
中 的 this 就 被 自动 设置 成 了 my_obj 对 象 的 引用 。 因 而 我 们 看 到 ，this .name 返回 的 
不 再 是 "Ninja"， 而 是 "Scripting guru" 了 "。 


如 果 我 们 调用 cal1 方法 时 需要 传递 更 多 的 参数 ， 可 以 在 后 面 依次 加 入 它们 ; 


some obj.someMethod.call (my obj, 'a', 'b', 'c'); 


另外 ， 如 果 我 们 没有 将 对 象 传递 给 call () 的 首 参数 ， 或 者 传递 给 它 的 是 nul1l, 它 的 
调用 对 象 将 会 被 默认 为 全 局 对 象 ”。 
apply () 的 工作 方式 与 ca1l1 () 基本 相同 ， 唯 一 的 不 同 之 处 在 于 参数 的 传递 形式 ， 
这 里 目标 函数 所 需要 的 参数 都 是 通过 一 个 数组 来 传递 。 所 以 ， 下 面 两 行 代码 的 作用 是 等 


some obj.someMethod.apply (my obj, ['a', 'b', 'c']); 
some obj.someMethod.call (my obj, 'a', 'b', 'c'); 


因而 ， 对 于 之 前 的 示例 ， 我 们 也 可 以 这 样 写 : 


> some obj.say.apply (my _ obj, ['Dude']); 
"Haya Dude, I am a Scripting guru" 


4.2.3.4 重新 认识 arguments 对 象 


在 上 一 章 中 ， 我 们 已 经 掌握 了 如 何在 一 个 函数 中 通过 arguments 来 访问 传递 给 该 函 
数 所 需 的 全 部 参数 。 例 如 : 


9 实际 上 就 是 通过 call 的 首 参数 修改 了 对 象 函 数 的 this 值 。 一 一 译 者 注 
? 即 this 指向 的 是 全 局 对 象 。 一 一 译 者 注 
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Sf UNGtiGH ££() 评 
return arguments; 
} 
> 
Ll 2, 3] 


尽管 arguments 看 上 去 像 是 一 个 数组 ， 但 它 实际 上 是 一 个 类 似 数组 的 对 象 。 它 和 数 


组 相似 是 因为 其 中 也 包含 了 索引 元 素 和 lengtn 属性 。 但 相似 之 处 也 就 到 此 为 止 了 ， 因 为 
arguments 不 提供 一 些 像 sort () 、slice() 这样 的 数组 方法 。 


我 们 可 以 把 arguments 转换 成 数组 , 这 样 就 可 以 对 它 使 用 各 样 的 数组 方法 了 。 


ss 


在 下 面 这 个 例子 中 ， 我 们 用 刚 学 到 的 cal110 方 法 做 到 了 这 点 : 


> 二 :二 
var args = [].slice.call (arguments); 
return args.reverse(); 


} 


bi 
[4,3,2,1] 


如 您 所 见 ， 这 里 的 做 法 是 新 建 一 个 空 数组 1] ， 再 使 用 它 的 slice 属性 。 当 然 ， 您 也 


可 以 通过 Array.prototype.slice 来 调用 同一 个 水 数 。 


4.2.3.5 ”推断 对 象 类 型 
之 前 ， 我 们 已 经 介绍 过 arguments 对 象 跟 数组 之 间 的 不 同 之 处 。 但 二 者 之 间 具 体 应 


该 如 何 区 分 呢 ? 或 者 我 们 换 一 种 问 法 : 既然 数组 的 typeof 返回 值 也 为 "object"， 那 么 


要 如 何 区 分 对 象 与 数组 呢 ? 


Array 的 toString( 方 法 是 不 行 的， 因为 在 Array 对 象 中 。 这 个 方法 已 经 出 于 其 他 目的 被 
重 写 了 : 


答案 是 使 用 Object 对 象 的 tostring0 方 法 。 这 个 方法 会 返回 所 创建 对 象 的 内 部 类 名 。 


> Object.prototype.toString.call({}); 
"[object Object]" 


> Object.prototype.toString.call([]); 
" [object Array]" 


在 这 里 ，toString0 方 法 必须 要 来 自 于 object 构造 器 的 prototype 属性 。 直 接 调用 
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> tn 
"1,2,3" 


也 可 以 写 为 : 


> Array.prototype.toSstring.call([1, 2, 
TI72737 


3]) ; 


下 面 我 们 来 做 一 些 更 有 趣 的 尝试 。 您 也 可 以 单独 为 Object .Prototype .toString 


设置 一 个 引用 变量 ， 以 便 让 代码 显得 更 简短 一 些 : 


> Var toStr = Object.prototype.toString; 


如 果 您 用 这 个 方法 调用 arguments， 很 快 就 能 发 现 它 与 Array 之 间 的 区 别 : 


> (function () { 
return toStr.call (arguments); 
} 0)); 
"[object Arguments]" 


同样 ， 这 个 方法 也 适用 于 DOM 元 素 : 


> toStr.call (document .body); 
"[object HTMLBodyElement]" 


4.2.4 Boolean 


下 面 继续 我 们 的 JavaScript 内 建 对 象 之 旅 。 接 下 来 要 介绍 的 对 象 相 对 来 说 就 简单 多 了 ， 


它们 不 过 是 一 些 基 本 数据 类 型 的 封装 ， 主 要 包括 


Boo ] 


在 笋 2 草 : 胡 承 多 狼 基 玖 , 数 纺 ,每 环 玫 于 人 # 均 芝 了 


ean、Number、String 等 。 


,我 们 已 经 学 习 了 大 量 关 于 Boolean 


类 型 的 应 用 。 在 这 里 ， 我 们 要 介绍 的 是 与 Boolean () 构造 器 相关 的 内 容 。 


> Var b = new Boolean () ， 


在 这 里 最 重要 的 一 点 是 ， 我 们 必须 明白 这 里 所 新 创建 的 b 是 一 个 对 象 ， 而 不 是 一 个 基 
本 数据 类 型 的 布尔 值 。 如 果 想 将 bp 转换 成 基本 数据 类 型 的 布尔 值 ， 我 们 可 以 调用 它 的 


valueof () 方 法 (继承 自 Object 对 象 )。 


> Var b = new Boolean (); 
> typeof b; 
"object" 


> typeof b.valueoOf (); 
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"boolean" 


> bp.valueof () ， 
false 


总 体 而 言 ， 用 Boolean () 构造 器 所 创建 的 对 象 并 没有 多 少 实用 性 ， 因 为 它 并 没有 提 
供 来 自 父 级 对 象 以 外 的 任何 方法 和 属性 。 

不 使 用 new 操作 符 而 单独 作为 一 般 函 数 使 用 时 ，Boolean0 可 以 将 一 些 非 布尔 值 转换 
为 布尔 值 〈 其 效果 相当 于 进行 两 次 取 反 操作 : !!value)。 


> Boolean ("test"); 
true 


> Boolean(™"™"); 
false 


> Boolean ({}); 
true 


而 且 ， 在 JavaScript 中 ， 除 了 那 六 种 falsy 值 外 ， 其 他 所 有 的 都 属于 truthy 值 %， 
其 中 也 包括 所 有 的 对 象 。 这 就 意味 着 所 有 由 new Boolean () 语句 创建 的 布尔 对 象 都 等 于 
true， 因 为 它们 都 是 对 象 。 


\ 


> Boolean (new Boolean (false) ); 
true 


这 种 情况 确实 很 容易 让 人 混淆 。 而 且 考 虑 到 Boolean 对 象 中 并 没有 很 特别 的 方法 ， 
我 们 建议 您 最 好 还 是 一 直 使 用 基本 类 型 来 表示 布尔 值 比较 妥当 。 


4.2.5s Number 


Number () 函数 的 用 法 与 Boolean () 类 似 ， 即 : 

令 ” ”在 被 当做 构造 器 函数 时 〔( 即 用 于 new 操作 符 )， 它 会 创建 一 个 对 象 ; 

令 在 被 当做 一 般 函 数 时 ， 它 会 试图 将 任何 值 转换 为 数字 ， 这 与 parseInt () 或 
parseFloat () 起 到 的 作用 基本 相同 。 


> Var n = Number('12.12'); 
> 


9 关于 falsy 和 truthy， 作 者 在 第 2 章 中 已 经 讨论 过 了 。 一 一 译 者 注 
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12.12 


> typeof n; 
"number" 


> var n = new Number('12.12'); 
> typeof n; 
"object" 


由 于 函数 本 身 也 是 对 象 ， 所 以 会 拥有 一 些 属性 。 在 Number () 函数 中 ， 有 一 些 内 置 属 
性 是 值得 我 们 注意 的 (它们 是 不 可 更 改 的 ): 

> Number.MAX VALUE; 

1.7976931348623157e+308 


> Number.MIN VALUE; 
5e-324 


> Number.POSITIVE INFINITY; 
Infinity 


> Number.NEGATIVE INFINITY; 
-Infinity 


> Number.NaN; 
NaN 


此 外 ，Number 对 象 中 还 提供 了 三 个 方法 , 它们 分 别 是 : toFixed()、toPrecision () 
和 toExponential () (详细 内 容 见 记 灵 C: 办 瑟 开 和 家)。 


> Var n = new Number (123.456) ， 
> n.toFixed (1) ， 
"123.5" 


需要 注意 的 是 ， 你 可 以 在 事先 未 创建 Number 对 象 的 情况 下 使 用 这 些 方法 。 在 这 些 例 
子 中 ，Number 对 象 均 在 后 台 完 成 创建 和 销毁 : 


> (12345) .to Exponential (); 
> "1.2345e+4" 


与 所 有 的 对 象 一 样 ，Number 对 象 也 提供 了 自己 的 tostring () 方法。 但 值得 注意 的 
是 ， 该 对 象 的 tostring0 方 法 有 一 个 可 选 的 radix 参数 〔 它 的 默认 值 是 10)。 


> var n = new Number (255); 


> Th OBETLLNAG() 


"255" 


> TtoOStrLng(L0) 


"255" 


> n.toString ( 
wm ££" 


16); 


> (3) EOStElinog (2) 


"11" 


2 (C3) toString(L10)> 


"3" 


4.2.6 String 


同样 ， 我 们 可 以 通过 st 
j 于 文本 操作 的 方法 ， 


了 一 系列 


ring () 构造 器 函数 来 新 建 String 对 象 。 该 对 象 为 我 们 提供 
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~ 


下 面 ， 我 们 通过 


> Var primiti 
> typeof prim 
"string" 


> Var obj = n 
> typeof obj; 
"object" 


'Hello'; 


itive; 


Me 


ew String('world'); 


String 对 象 实 际 上 就 像 是 一 个 字符 数组 ， 其 中 也 包括 


然 这 个 特性 在 ES5 了 
体 的 length 属性 。 


> obj 


mwWn 


> ODj 
mm Ve 


> .0 
5 


.length; 


如 果 我 们 想 获 得 


开始 才 引 入 ， 但 早已 被 


String 对 象 的 基本 类 型 值 ， 可 以 调 


昌 您 最 好 还 是 使 用 基本 的 字符 串 类 型 。 
个 示例 来 看 看 String 对 象 与 基本 的 字符 串 类 型 之 间 有 什么 区 别 。 


上 


j 于 每 个 字符 的 索引 属性 〈 虽 
大 浏览 器 支持 ， 除 了 早期 版 本 的 IE)， 以 及 整 


| 该 对 象 的 valueof () 或 
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toString () 方 法 (都 继承 自 object 对 象 )。 不 过 您 可 能 很 少 有 机 会 
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场景 中 ，String 对 象 都 会 被 自动 转换 为 基本 类 型 的 字符 串 。 


> obj .valueoOft () ; 
"world" 


> obj .toString ()? 
"world" 


OD 寺 
"world" 


这 么 做 ,因为 在 很 多 


而 基本 类 型 的 字符 串 就 不 是 对 象 了 ， 因 此 它们 不 含有 任何 属性 和 方法 。 但 JavaScript 


还 是 为 我 们 提供 了 一 些 将 基本 字符 串 类 型 转换 为 String 对象 的 语法 “就 像 我们 之 前 转换 
基本 类 型 的 数字 一 样 )。 


例如 在 下 面 的 示例 中 ， 当 我 们 将 一 个 基本 字符 串 当 做 对 象 来 使 


创建 String 对象， 在 调用 完 之 后 又 把 String 对 象 给 立即 销毁 


成 布尔 值 时 ， 尽 管 空 字符 串 属于 falsy 值 ， 但 所 有 的 String 对 象 都 是 truthy 值 〈 因 


> "potato".length; 
6 


> "EOmateo Ed 
wm " 


> "potato"["potatoes".length - 1]; 
于 


时 ， 后 台 就 会 相应 的 


最 后 我 们 再 来 看 一 个 说 明基 本 字符 串 与 String 对 象 之 间 区 别 的 例子 : 当 它 们 被 转换 


为 所 有 的 对 象 都 是 truthy 值 )。 


它 就 会 


> Boolean ("") 


false 


> Boolean (new String("™")); 
true 


与 Number () 和 Boolean () 类 似 ， 如 果 我 们 不 通过 new 操作 符 来 调用 String ()， 


试图 将 其 参数 转换 为 一 个 基本 字符 串 。 


> String(1); 


"1" 


如 果 其 参数 是 一 个 对 象 的 话 ， 这 就 等 于 调用 该 对 象 的 tostring () 方法 。 
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区 -七 至 工 站 人 (二 记 3 二] 汶 甩 
" [object Object]" 


> tL (LZ 


Wh ec Ad 


> Stringt ll 2 
true 


3]) === [1, 2, 3] .toString(); 


String 对 象 的 一 些 方 法 
下 面 , 让 我 们 来 示范 一 下 部 分 String 对 象 方法 的 调用 (如 果 想 获得 完整 的 方法 列表 ， 


可 以 参考 礁 爱 CC: 认 苇 开 象 )。 


首先 从 新 建 String 对 象 开始 : 


> var s = new String("Couch Potato" ) ; 


接 下 来 是 用 于 字符 串 大 小 写 转 换 的 方法 ，toUpperCase () 与 toLowerCase () : 


> s.toUpperCase (); 


"COUCH POTATO" 


> s.toLowerCase (); 


"couch potato" 


charAt () 方法 返 


就 是 一 个 字符 数组 )。 


> s.charAt (0); 
mm 人 


> Os 
mm 人 


回 的 是 我 们 指定 位 置 的 字符 ， 这 与 中 括号 的 作用 相当 《字符 串 本 身 


如 果 我 们 传递 给 cnarAt () 方法 的 位 置 并 不 存在 ， 它 就 会 返回 一 个 空 字符 串 : 


wr 


> s.charAt (101); 
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indexof () 方法 可 以 帮助 我 们 实现 字符 串 内 部 搜索 , 该 方法 在 遇 到 匹配 字符 时 会 返回 
第 一 次 匹配 位 置 的 索引 值 。 由 于 该 索引 值 是 从 0 开始 计数 的 ， 所 以 字符 串 "Couch" 中 第 二 
个 字符 "o" 的 索引 值 为 1。 


> s.indexOf ('o'); 
1 


另外 ,我 们 也 可 以 通过 可 选 参数 指定 搜索 开始 的 位 置 〈 以 索引 值 的 形式 )。 例 如 下 面 所 
找到 的 就 是 字符 串 中 的 第 二 个 "o"， 因 为 我 们 指定 的 搜索 是 从 索引 2 处 开始 的 。 


SSLndexof (or 2 
7 


如 果 我 们 想 让 搜索 从 字符 串 的 末端 开始 ， 可 以 调用 lastIndexof () 方 法 (但 返回 的 
索引 值 仍然 是 从 前 到 后 计数 的 )。 

> s.lastIndexOf ('o'); 

11 


当然 ， 上 述 方 法 的 搜索 对 象 不 仅仅 局 限于 字符 ， 也 可 以 用 于 字符 串 搜 索 。 并 且 搜 索 是 
区 分 大 小 写 的 。 


> s.indexOf ('Couch'); 
0 


如 果 方 法 找 不 到 匹配 对 象 ， 返 回 的 位 置 索引 值 就 为 -1: 


> s.indexOf ('couch'); 
-1 


如 果 我 们 想 进 行 一 次 大 小 写 无 关 的 搜索 ， 可 以 将 字符 串 转 换 为 小 写 后 再 执行 搜索 : 


> s.toLowerCase() .indexOf ('couch'); 
0 


如 果 相 关 的 搜索 方法 返回 的 索引 值 是 0， 就 说 明 字符 串 的 匹配 部 分 是 从 0 处 开始 的 。 这 有 
可 能 会 给 if 语句 的 使 用 带 来 某 些 混淆 因素 ， 当 我 们 像 下面 这 样 使 用 if 语句 , 就 会 将 索引 值 0 
隐 式 地 转换 为 布尔 值 false， 虽 然 这 种 写法 没有 什么 语法 错误 ， 但 在 逻辑 上 却 完全 错 了 : 


if (s.indexOf ('Couch')) {...} 


正确 的 做 法 是 : 当 我 们 用 if 语句 检测 一 个 字符 串 中 是 否 包含 男 一 个 字符 串 时 ， 可 以 
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用 数字 -1 来 做 indqexof () 结果 的 比较 参照 : 


if (s.indexOf ('Couch') !== -1) {...} 


接 下 来 ， 我 们 要 介绍 的 是 slice () 和 substring()， 这 两 个 方法 都 可 以 用 于 1 
标 字 符 串 中 指定 的 区 间 : 

> Liee (1 5) 

"ouch" 


抽 
加 
王 


> SsSubstring(l, 35) 
"ouch" 


需要 提醒 的 是 ， 这 两 个 方法 的 第 二 个 参数 所 指定 的 都 是 区 间 的 末端 位 置 ， 而 不 是 该 
闻 的 长 度 。 这 两 个 方法 的 不 同 之 处 在 于 对 负 值 参数 的 处 理 方式 ，substring () 方法 会 将 负 
值 视 为 0， 而 slice () 方法 则 会 将 它 与 字符 串 的 长 度 相 加 。 因 此 ， 如 果 我 们 传 给 它们 的 参数 
是 (1,-1) 的 话 ， 它 们 的 实际 情况 分 别 是 substring(1，0) 和 slice(l,s.Length-1) : 


网 


> svslice(l, =1)y 
"ouch potat" 


> s.substring(1 
i 


~ 
1 
Es 
~ 


还 有 一 个 方法 叫 substr () ， 但 由 于 它 不 在 JavaScript 的 标准 中 ， 所 以 您 应 该 尽 
量 用 supstring() 去 代替 它 。 

split () 方 法 可 以 根据 我 们 所 传递 的 分 割 字 符 串 ， 将 目标 字符 串 分 割 成 一 个 数组 。 
例如 : 


> 小 六 
["Couch", "Potato"] 


split () 是 join() 的 反 操作 ， 后 者 则 会 将 一 个 数组 合并 成 一 个 字符 串 。 例 如 : 


SmSpLLE( Tso ~ 
"Couch potato" 


concat () 方法 通常 用 于 合并 字符 串 ， 它 的 功能 与 基本 字符 串 类 型 的 + 操作 符 类 似 : 


> s.concat ("es");) 
"Couch potatoes" 
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我 们 所 讨论 的 方法 返回 的 都 是 一 个 新 的 基本 字符 串 ， 它 


Eq: 
需要 六 


主意 的 是 ， 到 目前 为 止 ， 


们 所 做 的 任何 修改 都 不 会 改动 源 


> 


alueoOf () ， 


"Couch potato" 


通常 情况 下 ， 我 们 会 用 indexof () 和 LastIndqexof () 方 法 进行 字符 串 内 搜索 但 


除 此 之 外 还 有 一 些 功 能 更 为 强大 的 方法 (如 search()、match()、replace 


们 可 以 以 


正则 表达 式 为 参数 来 执行 搜索 任务 。 关 于 正则 表达 式 ， 我 们 将 会 在 稍 后 的 


RegExp () 构造 器 函数 介绍 中 加 以 详细 讨论 。 
部 介绍 完了 ， 接 下 来 ， 我 们 要 介绍 一 些 工具 类 对 象 ， 它 


们 分 别 是 Math、Date 和 RegExp。 


4.2.7 Math 


现在 ， 


Math 


数据 封装 类 对 象 已 经 全 


与 我 们 之 前 所 见 过 的 其 


字符 串 。 所 有 的 方法 调用 都 不 会 影响 原始 字符 串 的 值 。 


() 等 )， 它 


也 全 局 内 建 对 象 是 有 些 区 别 的 Math 对 象 不 是 函数 对 象 ， 


所 以 我 们 不 能 对 它 调用 new 操作 符 ， 以 创建 别 的 对 象 。 实 际 上 ，Math 只 是 一 个 包含 一 系 
列 方 法 和 属性 、 用 于 数学 计算 的 全 


的 属性 都 是 一 些 不 可 修改 的 常数 ， 因 此 它们 都 以 名 字 大 写 的 方式 来 表示 


Math 


局 内 建 对 象 。 


多” 数字 常数 x: 


> Mat 


hi PL 


3.141592653589793 


SS 2 


> Mat 


的 平方 村 


h.SQRT2; 


1.4142135623730951 


令 ” 欧 拉 常 数 e: ” 


> Mat 


eM 


2.718281828459045 


SS 2 


的 自然 对 数 : 


@ 肯 


et 


然 对 数 的 底数 。 一 一 译 者 注 


属性 变量 的 不 同 〈 这 类 似 于 Number0 构 造 器 的 常数 属 怕 


E)。 下 面 就 让 我 们 来 看 看 这 些 属性 。 


自己 与 一 般 
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> Math.LN2; 
0.6931471805599453 


令 10 的 自然 对 数 : 


> Math.LN10; 
2.302585092994046 


现在 ， 您 知道 下 次 该 如 何 忽悠 朋友 们 了 吧 ? (无 论 出 于 怎么 样 的 尴 答 理由 〉 当 他 们 开 
始 使 劲 回 想 诸如 “e 的 值 是 什么 ?我 怎么 忘记 了 ”时 ， 我 们 只 需要 轻松 地 在 控制 台中 输入 
Math .E， 就 会 立即 得 到 答案 。 

接 下 来 ， 我 们 再 来 看 看 Math 对 象 所 提供 的 一 些 方法 (完整 的 方法 列表 请 见 记 如 C: 
帮 瑟 及 旬 )。 
首先 是 生成 随机 数 : 


> Math.random () ， 
0.3649461670235814 


random() 所 返回 的 是 0 到 1 之 间 的 某 个 数 ， 所 以 如 果 我 们 想 要 获得 0 到 100 之 间 的 
某 个 数 的 话 ， 就 可 以 这 样 : 


> 100 * Math.random(); 


如 果 我 们 需要 获取 的 是 某 max 和 min 之 间 的 值 ， 可 以 通过 一 个 公式 ( (max - min) * 
Math .random()) + min 来 获取 ， 例 如 ， 我 们 想 获取 的 是 2 到 10 之 间 的 某 个 数 ， 就 可 
以 这 样 : 


> 8 * Math.random() + 2; 
9.175650496668485 


如 果 这 里 需要 的 是 一 个 整数 的 话 ， 您 可 以 调用 以 下 取 整 方法 。 
令 floor () : 取 小 于 或 等 于 指定 值 的 最 大 整数 。 

令 ” ceil (): 取 大 于 或 等 于 指定 值 的 最 小 整数 。 

令 ”roung(): 取 最 靠近 指定 值 的 整数 。 

例如 ， 下 面 的 执行 结果 不 是 0 就 是 1: 
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> Math.round (Math.random()); 


如 果 我 们 想 获得 一 个 数字 集 人 则 可 以 调 月 
所 以 ， 当 我 们 在 一 个 表单 中 需要 一 个 合法 的 月 份 值 时 ， 可 以 用 下 面 的 方式 来 确 


据 能 正常 工作 : 


> Math.min(Math.max (1，input)，12)， 


除 此 之 外 ，Math 对 象 还 提供 了 一 些 用 于 执行 数学 计算 的 方法 ， 这 些 计 
去 专门 设计 即 可 使 用 的 。 这 意味 着 当 我 们 想 要 执行 指数 运算 时 只 需要 调 月 
包括 所 有 的 三 角 函 数 计 s 


而 求 平方 根 时 只 需要 调用 sart() ， 另 外 还 包 


atan () 等 。 


例如 ， 求 2 的 8 次 方 : 


> Math.pow(2, 8); 
256 


求 9 的 平方 根 : 


> Math.sqrt (9) ， 
3 


4.2.8 Date 


日 max0 和 min () 方 法 。 


崩 pow( 


保 相关 的 数 


是 我 们 不 需要 
) 方 法 即 可 ， 


in()、 


cos ()、 


Date () 是 用 于 创建 Date 对 象 的 构造 器 函数 , 我 们 在 用 它 创建 对 象 时 可 以 传递 以 下 几 


参数 。 


无 参数 默认 为 当天 的 日 期 )。 
一 个 用 于 表现 日 期 的 字符 串 。 
分 开 传递 的 日 、 月 、 时 间 等 值 。 


一 个 timestamp 值 。 "9 


2 SS 9 


下 面 是 一 个 表示 当天 日 期 和 时 间 的 对 象 示 例 : 


> new Date(); 


Wed Feb 27 2013 23:49:28 GMT-0800 (PST) 


2 UNIX 时间， 或 称 POSIX 时 间 ， 是 UNIX 或 类 UNIX 系统 使 
秒 起 至 现在 的 总 秒 数 ， 不 包括 羡 秒 。 一 一 译 者 注 


的 时 间 表 示 方 式 :， 从 协调 世界 时 1970 多 


E1 月 1 


0 时 0 分 0 
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控制 台 显示 了 Date 对 象 的 tostring () 结果 ， 因 此 这 里 的 长 字符 串 "Wed Feb 27 


op 


2013 23:49:28 GMT-0800 (PST) "实际 上 就 是 这 个 Date 对 象 的 字符 串 表 述 。 


接 下 来 ， 我 们 看 一 些 用 字符 串 初 始 化 Date 对 象 的 示例 ， 请 注意 它们 各 自 不 同 的 格式 
以 及 所 指定 的 时 间 。 


> new Date('2015 11 12°');} 
Thu Nov 12 2015 00:00:00 GMT-0800 (PST) 


> new Date('1 1 2016") 
Fri Jan 01 2016 00:00:00 GMT-0800 (PST) 


> new Date('l1 mar 2016 5:30'); 
Tue Mar 01 2016 05:30:00 GMT-0800 (PST) 


Date 构造 器 可 以 接受 各 种 不 同 格式 的 字符 串 日 期 输入 表示 法 ， 但 如 要 定义 一 个 精确 
的 日 期 例如 将 用 户 输入 直接 传递 给 Date 构造 器 ， 这 样 做 显然 不 够 可 靠 。 更 好 的 选择 是 
向 Date () 构造 器 传递 一 些 具 体 的 数值 ， 其 中 包括 : 


4 年 份 ; 

月 份 : 从 0 (1 月) 到 11 (12 月); 
期 : 从 1 到 31; 

时 数 : 从 0 到 23; 

分 钟 : 从 0 到 59; 

秒 钟 ， 从 0 到 59; 
毫秒 数 : 从 0 到 999。 

现在 让 我 们 来 看 一 些 具 体 示 例 。 

如 果 我 们 传递 所 有 参数 : 


2 SS 


> new Date(2015, 0, 1, 17, 05, 03, 120); 
Tue Jan 01 2015 17:05:03 GMT-0800 (PST) 


如 果 只 传递 日 期 和 时 钟 值 : 


> new Date(2015, 0, 1, 17); 
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Tue Jan 01 2015 17:00:00 GMT-0800 (PST) 


在 这 里 ， 我 们 需要 注意 一 件 事 ， 由 于 月 份 是 从 0 开始 的 ， 所 以 这 里 的 1 指 的 是 2 月 : 


> new Date(2016, 1, 28); 
Sun Feb 28 2016 00:00:00 GMT-0800 (PST) 


如 果 我 们 所 传递 的 值 越过 了 被 允许 的 范围 ，Date 对 象 会 自行 启动 “溢出 式 ” 前 进 处 理 。 
例如 ， 由 于 2016 年 2 月 不 存在 30 日 这 一 天 ， 所 以 它 会 自动 解释 为 该 年 的 3 月 1 日 (2016 
年 为 半年 )。 


> new Date(2016，1，29) ， 
Mon Feb 29 2016 00:00:00 GMT-0800 (PST) 


> new Date(2016, 1, 30); 
Tue Mar 01 2016 00:00:00 GMT-0800 (PST) 


类 似 地 ， 如 果 我 们 传递 的 是 12 月 32 日 ， 就 会 被 自动 解释 为 来 年 的 1 月 1 日 : 


> new Date(2012, 11, 31); 
Mon Dec 31 2012 00:00:00 GMT-0800 (PST) 


> new Date(2012, 11, 32); 
Tue Jan 01 2013 00:00:00 GMT-0800 (PST) 


最 后 ， 我 们 也 可 以 通过 timestamp 的 方式 来 初始 化 一 个 Date 对 象 ( 这 是 一 个 以 毫 
秒 为 单位 的 UNIX 纪元 方式 ， 开 始 于 1970 年 1 月 1 日 )。 


> new Date(1357027200000) ; 
Tue Jan 01 2013 00:00:00 GMT-0800 (PST) 


如 果 我 们 在 调用 Date () 时 没有 使 用 new 操作 符 ， 那 么 无 论 是 否 传递 了 参数 ， 所 得 字 
符 串 的 内 容 始终 都 将 是 当前 的 日 期 和 时 间 《 就 像 下 面 示例 所 运行 的 那样 ): 


> Date(); 
Wed Feb 27 2013 23:51:46 GMT-0800 (PST) 


> Date(1l, 2, 3, "it doesn't matter"); 
Wed Feb 27 2013 23:51:52 GMT-0800 (PST) 


> typeof Date(); 
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"string" 
> typeof new Date(); 
"object" 


Date 对 象 的 方法 


一 旦 我 们 创建 了 Date 对 象 ， 就 可 以 调用 该 对 象 中 的 许多 方法 。 其 中 使 用 最 多 的 都 是 
一 些 名 为 set* () 或 get*() 的 方法 ， 例 如 getMontnh () 、setMonth () 、getHours ()、 
setHours () 等 等 。 下 面 我 们 来 看 一 些 具体 的 示例 。 

首先 ， 新 建 一 个 Date 对 象 : 


> Var d = new Date(2015, 1, 1); 


> d.toSstring(); 
Sun Feb 01 2015 00:00:00 GMT-0800 (PST) 


然后 ， 将 其 月 份 设置 成 3 月 〈 记 住 ， 月 份 数 是 从 0 开始 的 ): 


> d.setMonth (2) ， 
1425196800000 


> d.toSstring(); 
Sun Mar 01 2015 00:00:00 GMT-0800 (PST) 


接着 ， 我 们 读 取 月 份 数 : 


> q.getMontnh () 
2 


除了 这 些 实例 方法 以 外 ，Date () 函数 /对 象 中 还 有 另外 两 个 方法 〈ES5 中 又 新 增 了 一 
个 )。 这 两 个 属性 不 需要 在 实例 化 情况 下 使 用 ， 工 作 方式 与 Math 的 方法 基本 相同 。 在 基于 
class 概念 的 程序 设计 语言 中 ， 它 们 往往 被 称 之 为 “静态 ”方法 ， 因 为 它们 的 调用 不 需要 依 
托 对 象 实例 。 

例如 ，Date.parse () 方法 会 将 其 所 接收 的 字符 串 转 换 成 相应 的 tmestamp 格式 ， 并 返 


| 


> Date.parse('Jan 11, 2018"'); 
1515657600000 


而 Date .UTC() 方 法 则 可 以 接受 包括 年 份 、 月 份 、 日 期 等 在 内 的 所 有 参数 ， 并 以 此 产 
生 一 个 相应 的 、 符 合格 林 尼 治 时 标准 的 timestamp 值 : 


个 
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> Date.UTC(2018, 0, 11); 
1515628800000 


由 于 用 Date 创建 对 象 时 可 以 接受 一 个 timestamp 参数 ， 因 此 我 们 也 可 以 直接 将 
Date .UTC() 的 结果 传递 给 该 构造 器 。 在 下 面 的 示例 中 ,我 们 演示 了 如 何在 新 建 Date 对 象 


的 过 程 中 ， 将 UTCO 返 回 的 格林 尼 治 时 间 转 换 为 本 地 时 间 ; 


> new Date (Date.UTC(2018, 0, 11)); 
Wed Jan 10 2018 16:00:00 GMT-0800 (PST) 


> new Date(2018, 0, 11); 
Thu Jan 11 2018 00:00:00 GMT-0800 (PST) 


此 外 ，ES5 还 为 Date 构造 器 新 增 了 now() 方 法 ， 以 用 于 返 


回 当前 timestamp。 比 起 


在 ES3 中 对 着 一 个 Date 对 象 调 用 getTime() 方 法 而 言 ， 这 种 六 


> Date.now() 
1362038353044 


> Date.now() === new Date () .getTime () ; 
true 


所 方法 显然 更 为 简洁 。 


您 可 以 认为 ， 日 期 的 内 部 表达 形式 就 是 一 个 整数 类 型 的 timestamp， 而 它 的 其 他 表 


达 形 式 只 不 过 是 这 种 内 部 形式 的 “糖衣 ” 这 么 一 来 ， 我们 就 很 容易 理解 为 什么 Date 对 象 


的 valueof () 返 回 的 是 一 个 timestamp 数据 : 


> new Date() .valueoOf () ， 
1362418306432 


而 将 Date 转换 为 整 型 则 只 需要 一 个 + 号 : 


> + new Date(); 
1362418318311 


例子 : 计算 生日 


下 面 ， 我 们 再 来 看 最 后 一 个 关于 Date 对 象 的 工作 示例 。 假 如 ， 我 很 好 奇 自己 2016 


年 的 生日 (6 月 20 日 ) 是 星期 几 ， 就 可 以 这 样 : 


> var d = new Date(2016, 5, 20); 
> d.getDay(); 
1 
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由 于 


由 出 


期 数 是 从 0〈 星 期 日 ) 开始 计数 的 ， 因 此 ，1 应 该 代表 了 星期 一 。 我 们 来 验证 一 下 : 


> d.toDateString(); 
"Mon Jun 20 2016" 


好 吧 


， 星 期 一 是 不 错 ， 但 那 显 然 不 是 一 个 搞 派对 的 最 佳 日 子 。 接 下 来 我 要 弄 一 个 循环 ， 


看 看 从 2016 年 到 3016 年 有 多 少 个 6 月 20 日 是 星期 一 ， 并 查看 一 下 这 些 日 子 在 一 周 当 中 的 


分 布 情况 〈 嗯 ， 毕 竟 计 算 机 技术 这 么 发 达 , 哪 天 DNA 就 被 黑客 入 侵 了 , 相信 大 家 到 了 3016 


年 还 是 会 精 


拌 捕 的 )。 


首先 ， 我 们 来 初始 化 一 个 包含 七 个 元 素 的 数组 ， 每 个 元 素 都 分 别 对 应 着 一 周 中 的 一 天 ， 以 


充当 计数 器 。 


Var 


也 就 是 说 ,在 循环 到 3016 年 的 过 程 中 ,我 们 将 会 根据 执行 情况 递增 相关 的 计数 器 : 


stats [0r075050520705015 


接 下 来 就 是 该 循环 的 实现 : 


GE 
} 


然后 


(var i = 2016; i < 3016; i++) { 
stats[new Date(i, 5, 20) .getDay() 1++; 


， 我 们 来 看 看 结果 : 


> stats; 


[140, 


哇 哦 ! 有 142 个 星期 五 和 145 个 星期 六 ， 不 错 不 错 ! 


146, 


140, 145, 142, 142, 145] 


4.2.9 RegExp 


正则 表达 式 (regular expression) 提供 了 一 种 强大 的 文本 搜索 和 处 理 方式 。 对 于 正则 表 


达 式 ， 不 同 的 语言 有 着 不 同 的 实现 《就 像 “方言 7，JavaScript 所 采用 的 是 Perl 5 的 语法 。 


另外 ， 为 简便 起 见 ， 人 们 经 常会 将 regular expression 缩写 成 regex 或 者 regexp。 
一 个 正则 表达 式 通常 由 以 下 部 分 组 成 。 


多 


一 个 


j 于 匹配 的 模式 文本 。 


令 用 0 个 或 多 个 修饰 符 《〈 也 叫做 标志 ) 描述 的 匹配 模式 细节 。 


该 匹配 模式 也 可 以 是 简单 的 全 字符 文本 ， 但 这 种 情况 极 少 ， 而 且 此 时 我 们 多 半 会 使 用 
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indqexof () 这 样 的 方法 ， 而 很 少 会 用 到 正 贝 


更 为 


这 里 详细 讨论 它们 。 接 下 来 ， 我 们 
达 式 的 对 象 和 方法 。 另 外 ， 我 们 还 在 附 
法 指南 ， 以 供 读者 参考 。 

在 JavaScript 中 ， 我 们 通常 会 利 月 
例如 : 


复杂 ， 也 更 难 


以 理解 。 


内 会 介 


事实 上 ， 竺 握 正 则 3 


个 安放 


> var re = new RegExp("j.*t"); 


录 D: 正则 对 


日 内 建构 造 器 Reg] 


绍 它 在 JavaScript 中 的 语法 ， 以 及 可 


达 式 中 提供 了 一 


Exp () 来 创建 


份 完整 的 


我 们 也 不 打针 


上 表达 式 。 在 大 多 数 情况 下 ， 匹 配 模式 往往 都 要 
长 达 式 是 一 个 很 大 的 问题 ， 


在 


于 正则 


衣 


匹配 模式 写 


E 则 表达 


式 对 象 » 


另外 ，RegExp 对 象 还 有 一 种 更 为 简便 的 正则 文本 标记 法 (regex literal notation ): 

> var re = /j.*t/; 

在 上 面 的 示例 中 ,“j . * 七 ”就 是 我 们 之 前 说 的 正则 表达 式 模 式 。 其 具体 含义 是 :“ 匹 配 
任何 以 了 开头 、t 结尾 的 字符 串 ， 且 这 两 个 字符 之 间 可 以 包含 1 个 或 多 个 字符 。” 其 中 的 * 
号 的 意思 就 是 “0 个 或 多 个 单元 ”， 而 这 里 的 点 号 〈.) 所 表示 的 是 “任意 字符 ” 当然 ， 当 


我 们 


regex 对 象 时 ， 可 以 向 构造 器 的 第 二 参数 传递 下 列 字符 中 的 生 


向 RegExp 构造 器 传递 该 模式 时 ， 还 必须 将 它 放 在 一 对 引号 中 。 
RegExp 对 象 的 属性 
以 下 是 一 个 正则 表达 式 对 象 所 


如 果 该 属 怕 
时 就 会 停止 。 如 


4.2.9.1 


S global: 


有 的 


遇 性 


BP 
果 需 要 


找 出 所 有 的 


设置 大 小 写 相 关 性 ， 默 认为 false。 


ijgnoreCase: 


multiline: 


设置 是 否 跨行 搜索 ， 


4 
4 
9 
4 


另外 ， 除 了 lastIndex 外 ， 


source: 用 于 


F 


默认 为 fal se。 


lastIndex: 搜索 开始 的 索引 位 ， 默 认 值 为 0。 
六 存储 正 则 表达 式 匹 配 模式 。 
押 所 有 属性 


E 值 为 false (这 也 是 默认 值 )， 相 关 搜 索 在 找到 第 一 个 匹配 
匹配 ， 将 其 设置 为 true 即 可 。 


FE 在 对 象 创建 之 后 就 都 不 能 再 被 修改 了 。 


而 且 ， 前 三 个 属性 是 可 以 通过 regex 修饰 符 来 表示 的 。 当 我 们 通过 构造 器 来 创建 


[2 39 


9 


多 


代表 global。 


“i” 代 表 ijgnoreCase。 


E 意 组 合 。 


[一 
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令 “m” 代 表 multiline。 


这 些 字 符 可 以 以 任意 顺序 传递 ， 只 要 它们 被 传递 给 了 构造 器 ， 相 应 的 修饰 符 就 会 被 设 
置 为 true。 例 如 在 下 面 的 示例 中 ， 我 们 将 所 有 的 修饰 符 都 设置 成 了 true: 


> Var re = new RegExp('j.*t', 'gmi'); 


现在 来 验证 一 下 : 


> re.global; 
true 


不 过 ， 这 里 的 修饰 符 一 旦 被 设置 了 就 不 能 更 改 : 


> re.global = false; 
> re.global; 
true 


另外 ， 我 们 也 可 以 通过 文本 方式 来 设置 这 种 regex 的 修饰 符 ， 只 需 将 它们 加 在 斜 线 
后 面 : 


> var re = /j.*t/ig; 
> re.global; 
true 


4.2.9.2 ”RegExp 对 象 的 方法 


RegExp 对 象 中 有 两 种 可 用 于 查找 匹配 内 容 的 方法 : test () 和 exec () 。 这 两 个 方法 
的 参数 都 是 一 个 字符 串 ， 但 test () 方法 返回 的 是 一 个 布尔 值 〈 找 到 匹配 内 容 时 为 true， 
否则 就 为 false), 而 exec() 返回 的 则 是 一 个 由 匹配 到 的 字符 串 组 成 的 数组 ,显然 , exec () 
能 做 的 工作 更 多 ， 而 test () 只 有 在 我 们 不 需要 匹配 的 具体 内 容 时 才 会 有 所 用 处 。 人 们 通 
常会 用 正则 表达 式 来 执行 某 些 验证 操作 ， 在 这 种 情况 下 往往 使 用 test () 就 足够 了 。 


下 面 的 表达 式 是 不 匹配 的 ， 因 为 目标 中 是 大 写 的 了 


> /j.*t/.test ("Javascript"); 
false 


如 果 将 其 改 成 大 小 写 无 关 的 ， 结 果 就 返回 true 了 : 


> /j.*t/i.test("Javascript"); 
true 
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同样 的 ， 我 们 也 可 以 用 测试 一 下 exec 0) 方法， 并 访问 它 所 返回 数组 的 首 元 素 : 


> /j.*t/i.exec("Javascript") [0]; 
"Javascript" 


4.2.9.3 ”以 正则 表达 式 为 参数 的 字符 串 方 法 


在 本 章 前 面 ， 我 们 曾 向 您 介绍 过 如 何 使 用 String 对 象 的 IndexOfO0 和 lastIndqexOfO 
方法 来 搜索 文本 。 但 这 些 方法 只 能 用 于 纯 字 符 串 式 的 搜索 , 如 果 想 获得 更 强大 的 文本 搜索 能 力 就 
需要 用 到 正则 表达 式 了 。String 对 象 也 为 我 们 提供 了 这 种 能 


在 String 对 象 中 ， 以 正则 表达 式 对 象 为 参数 的 方法 主要 有 以 下 这 些 。 
令 match() 方 法 : 返回 的 是 一 个 包含 匹配 内 容 的 数组 。 
多” search () 方 法 : 返回 的 是 第 一 个 匹配 内 容 所 在 的 位 置 。 

令 ” replace () 方 法 : 该 方法 能 将 匹配 的 文本 蔡 换 成 指定 的 字符 串 。 

4 split () 方 法 : 能 根据 指定 的 正则 表达 式 将 目标 字符 串 分 割 成 若干 个 数组 元 素 。 


4.2.9.4 ”search() 与 match() 
下 面 来 看 一 些 search() 与 match() 方 法 的 用 例 。 首 先 ， 我 们 来 新 建 一 个 String 
对 象 : 


> var s = new String('HelloJavaScriptWorld'); 


然后 调用 其 match () 方法 ， 这 里 返回 的 结果 数组 中 只 有 一 个 匹配 对 象 ; 


> s.match(/a/); 
["a"] 


接 下 来 ， 我 们 对 其 施加 g 修饰 符 ， 进 行 global 搜索 ， 这 样 一 来 返回 的 数组 中 就 有 了 两 
个 结果 : 


> s.match(/a/g); 
[a 2 a” 


下 面 进行 大 小 写 无 关 的 匹配 操作 : 


> s.match(/j.*a/i); 
["Java"] 


而 $2 则 表示 第 二 组 ， 以 此 类 推 。 


密码 。 当 
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而 search () 方 法 则 会 返回 匹配 字符 串 的 索引 位 置 : 


> s.search(/j.*a/i); 
5 


4.2.9.5 replace() 


replace () 方 法 可 以 将 相关 的 匹配 文本 蔡 换 成 菜 些 其 他 字符 串 。 在 下 面 的 示例 中 ， 
们 移 除 了 目标 字符 串 中 的 所 有 大 写字 符 《〈 实 际 上 是 蔡 换 为 空 字符 串 ): 


> s.replace(/[A-Z2]/g, ''); 
"elloavacriptorld" 


如 果 我 们 忽略 了 g 修饰 符 ， 结 果 就 只 有 首 个 匹配 字符 被 蔡 换 掉 : 


> s.replace(/[A-2]/, ''); 
"elloJavaScriptWorld" 


我 


当 某 个 匹配 对 象 被 找到 时 ， 如 果 我 们 想 让 相关 的 蔡 换 字符 串 中 包含 匹配 的 文本 ， 可 以 
使 用 $g 来 代 蔡 所 找到 的 匹配 文本 , 例如， 下 面 我 们 在 每 一 个 匹配 字符 前 面 加 了 一 个 下 划 线 : 


> s.replace(/[A-2]/g, "_$&"); 
"_Hello Java Script World" 


如 果 正 则 表达 式 中 分 了 组 ( 即 带 括 号 )， 那 么 可 以 用 $1 来 表示 匹配 分 组 中 的 第 一 组 ， 


> s.replace(/([A-2])/g, "_$1")，; 
"_Hello Java Script World" 


假设 我 们 的 Web 页 面 上 有 一 个 注册 表单 ， 上 面 会 要 求 用 户 输入 E-mail 地 址 、 
户 输入 他 们 的 E-mail 地 址 时 ， 我 们 可 以 利用 JavaScript 将 E-mail 的 前 9 


炼 出 来 ， 作 为 后 面 用 户 名 字段 的 建议 : 


> Var email = "stoyan@phpied.com"; 


> var username = email.replace(/(.*)@.*/, "$1"); 
> username; 


"stoyan" 
4.2.9.6 回调 式 替 换 
当 我 们 需要 执行 一 些 特定 的 蔡 换 操作 时 ,也 可 以 通过 返回 字符 串 的 函数 来 完成 。 


I 


蜂 民 
站 内 


澳 直 


这 村 
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我 们 就 可 以 在 执行 蔡 换 操作 之 前 实现 一 些 必要 的 处 理 逻 辑 : 


> function replaceCallback (match) { 
return " " + match.toLowerCase () 


} 


> s.replace(/[A-Zz]/g, replaceCallback); 
"_hello java script world" 


Sd 


该 回调 函数 可 以 接受 一 系列 的 参数 (在 上 面 的 示例 中 ， 我 们 忽略 了 所 有 参数 ， 但 首 参 
数 是 依然 存在 的 )。 


令 ” 首 参数 是 正则 表达 式 所 匹配 的 内 容 。 

令 ” 尾 参数 则 是 被 搜索 的 字符 串 。 

信 ” 尾 参数 之 前 的 参数 表示 的 是 匹配 内 容 所 在 的 位 置 。 
儿 剩 下 的 参数 可 以 是 由 regex 模式 所 分 组 的 所 有 匹配 字符 串 组 。 


下 面 让 我 们 来 具体 测试 一 下 。 首 先 , 我 们 新 建 一 个 变量 ,用 于 存储 之 后 传递 给 回调 函数 的 
整个 arguments 对 象 : 


> var glob; 


下 一 步 是 定义 一 个 正则 表达 式 ， 我 们 将 E-mail 地 址 分 成 三 个 匹配 组 ， 具 体格 式 形 


something@something.something: 


NS 
> 入 
可 


y var Ee A (Cet) Ny (a) 


最 后 就 是 定义 相应 的 回调 函数 了 , 它 会 接受 glob 数组 中 的 参数 , 并 返回 相应 的 蔡 换 内 容 : 


Var callback = function()1{ 
glob = arguments; 
return arguments[1] + ' at ' + arguments[2] + ' dot "十 


arguments[3]; 


}; 


然后 我 们 就 可 以 这 样 调用 它们 了 : 


> "stoyan@phpied.com".replace (re, callback); 
"stoyan at phpied dot com" 


割 成 一 个 数组 。 下 面 就 是 我 们 用 逗号 将 字符 串 分 割 的 结果 : 
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下 面 是 该 回调 函数 返回 的 参数 内 容 : 

> OLOD; 

["stoyan@phpied.com", "stoyan", "phpied", "com", 0, 
"stoyan@phpied.com"] 


4.2.9.7 split() 
我 们 之 前 已 经 了 解 split() 方 法 ， 它 能 根据 指定 的 分 割 字 符 串 将 我 们 的 输入 字符 串 分 


> Var csv = 'one, two,three ,four'; 
> GSVv .Split(", "> 
[ mm one mm 2 mm two wm 2 wm three mm mm four mm ] 


由 于 上 面 的 输入 字符 串 中 存在 逗号 前 后 的 空格 不 一 致 的 情况 ， 这 导致 生成 的 数组 也 会 


出 现 多 余 的 空格 。 如 果 我 们 使 用 正则 表达 式 ， 就 可 以 在 这 里 用 \s* 修 饰 符 来 解决 ， 意 思 就 


晶 , 
候 


匹配 0 个 或 多 个 空格 ”: 


> csv.split(/\s*,\s*/); 
["one" "two" > "three" : nm four"] 


4.2.9.8 用 字符 串 来 代替 过 于 简单 的 regexp 对 象 


关于 我 们 刚刚 讨论 的 四 个 方法 (split()、match()、search() 和 replace())， 


还 有 
字 


RegExp () 一样 。 


样 设 


最 后 一 件 事 不 得 不 提 ， 即 这 些 方法 可 以 接受 的 参数 不 仅仅 是 一 些 正则 表达 式 ， 也 包括 
串 。 它 们 会 将 接收 到 的 字符 串 参 数 自动 转换 成 regex 对 象 ， 就 像 我 们 直接 传递 new 


例如 ， 下 面 的 replace(0) 方 法 直接 使 用 字符 串 参 数 来 执行 蔡 换 : 


> "test".replace('t', "xz ) 
"rest" 


它 与 下 面 的 调用 是 等 价 的 : 


> "test".replace (new RegExp (' 七 ')， 'r'); 


"rest" 


当然 ， 在 执行 这 种 字符 串 传递 时 ， 我 们 就 不 能 像 平时 使 用 构造 器 或 者 regex 文本 法 那 
置 表达 式 修 饰 符 了 。 使 用 字符 串 而 不 是 正则 表达 式 来 替换 文本 比较 常见 的 错误 是 ， 使 
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用 者 往往 会 误 以 为 原 字 符 串 中 所 有 的 匹配 都 会 蔡 换 。 然 而 如 上 所 述 ， 以 字符 串 为 参数 的 
replace0 其 global 修饰 符 的 值 将 为 false, 即 只 有 第 一 个 被 匹配 到 的 字符 串 才 会 被 蔡 换 。 
这 与 其 他 一 些 编程 语言 不 同 ， 从 而 容易 导致 混淆 。 例 如 ; 


> "pool".replace('o', '*"'); 


"p*ol" 


而 使 用 者 大 多 数 情 况 下 的 意图 是 蔡 换 所 有 的 匹配 : 


> "pool".replace(/o/g, "xm) ; 
VpP**]" 


4.2.10 ”Error 对 象 


当代 码 中 有 错误 发 生 时 ， 一 个 好 的 处 理 机 制 可 以 帮助 我 们 理解 错误 发 生 的 原因 ， 并 
使 我 们 能 以 一 种 较为 优雅 的 方式 来 纠正 错误 。 在 JavaScript 中 ， 将 会 使 用 try、catch 及 
finally 语句 组 合 来 处 理 错误 。 当 程序 中 出 现 错误 时 ， 就 会 殷 出 一 个 Error 对 象 ， 该 对 
象 可 能 由 以 下 几 个 内 建构 造 器 中 的 一 个 产生 而 成 ， 它 们 包括 EvalError、 RangeError、 
ReferenceError、 SyntaxError、 TypeError 和 URIError 等 ， 所 有 这 些 构造 器 都 
继承 自 Error 对 象 。 

下 面 ， 我 们 来 主动 触发 一 个 错误 ， 看 看 会 发 生 些 什么 。 下 面 的 示例 中 调用 了 一 个 并 不 
存在 的 函数 ， 控 制 台 中 输入 : 


> iDontExist(); 


我 们 就 会 看 到 如 图 4-3 所 示 的 内 容 。 


生日 晶 Developer Tools - chrome:/ /newtab/ 站 


轩 加 人 信 ,GG 】 


Elements Resources Network 


> iDontExist(); 
BReferenceError: iDontExist is not defined 
> 


党 


器 
4-3 


= Qe 


<top frame> $ 


Errors Warnings Logs 


普 误 显 示 的 方式 在 各 浏览 器 和 宿主 环境 中 差别 可 能 会 很 大 。 事 实 上 , 大 多 数 现代 浏览 器 倾 
向 于 向 用 户 隐藏 错误 ， 但 不 能 因此 就 假设 我 们 所 有 的 用 户 都 会 屏蔽 错误 显示 ， 而 制作 一 个 没有 
错误 、 用 户 体验 完美 的 页 面 理 所 当然 是 开发 者 的 责任 。 在 上 面 的 例子 中 ， 错 误 被 显示 是 因为 我 


们 没有 尝试 捕获 (catch) 这 个 


个 错误 。 季 和 运 的 是 ， 错 误 


和 获 很 容易 ， 只 需要 我 们 使 用 try 语句 后 接 一 个 catch 语 
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错误 。 程 序 既 没有 预测 到 这 里 会 出 现 错误 ， 也 不 知道 怎样 处 理 这 


句 即 可 。 


例如 添加 下 面 代码 ， 我 们 就 不 会 看 到 之 前 截图 中 的 那个 错误 显示 了 : 
try { 

iDontExist(); 
} catch (e){ 


// do nothing 
} 


如 您 所 见 ， 这 里 


S tryi 


包含 两 部 分 内 容 。 

在 句 及 其 代码 块 。 

catch 语句 及 其 参数 变量 和 代码 块 。 
finally 语句 并 没有 在 这 个 

何 (无 论 有 没有 错误 发 生 ) 都 要 执行 的 内 容 。 
在 上 面 的 示例 中 , 我 们 3 


多 


例子 中 出 现 ， 这 


是 一 个 可 选项 , 主要 用 


于 执行 一 些 无 论 如 


没有 在 catch 语句 后 面 的 代码 块 中 写 入 任何 内 容 , 但 实际 上 


我 们 可 以 在 这 里 加 入 一 些 用 于 修复 错误 的 代码 ， 或 者 至 少 可 以 将 该 应 用 程序 错误 的 一 些 特 
定 情况 反馈 给 用 户 。 
catch 语句 的 参数 〈 括 号 中 的 ) e 实际 上 是 一 个 Error 对 象 。 跟 其 他 对 象 一 样 ， 它 也 
提供 一 系列 有 用 的 方法 与 属性 。 遗 憾 的 是 ， 不 同 的 浏览 器 对 于 这 些 方法 与 属性 都 有 着 各 自 
不 同 的 实现 ， 但 其 中 有 两 个 属性 的 实现 还 是 基本 相同 的 ， 那 就 是 e.name 和 e .message。 
现在 ， 让 我 们 来 看 看 这 段 代 码 : 
try 并 
iDontExist(); 
} catch (e){ 
alert(e.name + ': /+ e.message); 
} finally { 
alert ('Finally!'); 
} 
如 您 所 见 ， 这 里 的 第 一 个 alert () 显示 了 e.name 和 e.message， 而 后 一 个 则 显示 


了 Finally! 字样 。 


在 Firefox 和 Chrome 中 ， 第 一 个 alert0 将 显示 的 内 容 是 
not defined。 而 在 Internet Explorer 中 则 是 TypeError: Object expected。 总 之 ， 


了 ReferenceError: iDontExist is 


这 里 向 我 们 


148 JavaScript 面向 对 象 编程 指南 (第 2 版 ) 
传递 了 两 个 信息 : 


全 e.n 


人 I 


于 


ame 所 包含 的 是 构造 当前 Error 对 象 的 构造 器 名 称 。 


要 使 用 一 些 技巧 ， 以 便 我 们 的 代码 能 处 理 

当然 ， 我 们 也 可 以 用 new 
对 象 ， 然 后 告诉 JavaScript 引擎 某 个 特定 的 条 件 ， 并 使 用 th 
妥 设 我 们 需要 调用 一 个 maybe 
。 我 们 想 统 一 进行 错误 处 理 ， 
值 不 是 我 们 想 要 的 ， 那 么 代码 都 应 该 这 样 


下 面 来 看 
回 结果 作为 除数 来 执行 除法 运 
maybeExists () 函数 不 存在 ， 还 是 返回 


try { 


Error () 或 者 其 他 


a 
Lr 


个 


\ 体 的 示例 ， 


Error 对 象 在 各 宿主 环境 (浏览 器 ) 中 的 表现 3 


不 


Var total = maybeExists (); 


十 扑 


(total === 0) { 
throw new 


Error('Division by zero!'); 


} else { 
alert (50 / total); 


} 


i 


catch 
alert(e.name + ': 
finally { 


(e) { 


"+ e.message); 


alert ('Finally!'); 


} 


根据 maybeFExists() 函数 的 存在 与 否 及 其 i 


令 如 果 maybeExists() 函数 不 存在 ， 我 们 在 Fir 


| 


返 


无 


7 


与 : 


人 


致 ， 因 此 在 这 里 我 们 需 
类 型 的 错误 〈 即 e .name 的 值 )。 
ror 对 象 构造 器 来 自 定 义 一 个 Error 
row 语句 来 抛 出 该 对 象 。 
Exists () 函数 ， 并 将 函数 
论 错误 原因 


» 


和 济 


值 , 这 段 代码 会 弹出 几 种 不 同 的 信息 : 


efox 中 将 会 得 到 信息 


“ReferenceError: maybeExists() is not defined”， 而 在 下 中 则 为 “TypeError: 
Object expected ”。 


zerol ”。 


多 


另外 , 这 日 
zero1') 语句， 然而 我 们 也 可 以 根据 自 


new RandeE 


卫 


throw 


如 果 maybeExists() 的 返 
在 以 上 所 有 的 情况 下 ， 程 序 都 会 弹出 第 二 个 alert 窗 


有 E 抛 出 的 是 一 般 性 的 错误 提示 , 使 用 的 是 throw new Erro 


| 


直接 定义 一 个 一 般 对 象 抛 出 : 


身 的 需要 来 明确 


值 为 2， 我 们 将 得 到 的 alert 信息 是 25。 


， 内 容 为 “Finally !”。 


th 


如 果 maybeExists () 返回 值 为 0， 我 们 将 得 到 的 信息 是 “Error: Division by 


r('Divisionby 


错误 类 型 。 例 如 可 以 利用 row 


rror ('Division by zero!') 语 句 来 抛 出 该 错误 ， 或 者 不 用 任何 构造 器 ， 
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name: “MyError", 


message 


} 


: "OMG! Something terrible has happened" 


这 样 一 来 , 我 们 就 可 以 使 用 自 定义 的 Error 名 ,从 而 解决 了 浏览 器 之 间 由 于 抛 出 错误 不 
相同 所 导致 的 问题 。 
4.3 本章 小 结 

在 第 2 章 : 基本 数据 类 型 、 数 组 、 循 环 及 条 件 表 达 式 中 ， 我 们 学 习 了 JavaScript 的 五 
大 基本 数据 类 型 (number、string、boolean、null 和 undefined)， 而 且 ， 我 们 也 
说 过 除 这 些 基 本 类 型 以 外 的 任何 数据 都 属于 对 象 。 在 本 章 ， 我 们 又 了 解 了 以 下 内 容 : 


令 对 象 与 数组 很 类 似 ， 但 它 还 允许 我 们 指定 键 值 。 


人 对 象 通常 都 会 拥有 若干 个 属性 。 


% 其 中 有 些 属性 可 以 是 函数 (函数 本 身 也 是 数据 ,加 


这 些 属性 通常 称 为 方法 。 


忆 下 var f= function() {};)。 


令 ” 数 组 本 身 也 可 以 看 做 拥有 一 系列 数字 属性 ， 并 外 加 一 个 会 自动 增长 的 length 属 


性 的 对 象 。 


令 ”Array 对 象 中 有 着 一 系列 非常 有 用 的 方法 (例如 sort () 和 slice() )。 
令 函数 也 是 一 种 对 象 ， 它 们 本 身 也 有 属性 〈 例 如 lengthn 和 prototype) 和 方法 


(例如 


call() 和 apply ())。 


对 于 五 种 基本 数据 类 型 ， 除 了 undefineqd 和 null 外 ， 其 他 三 个 都 有 相应 的 构造 器 
函数 ， 分 别 是 Number ()、String() 以 及 Boolean () 。 通 过 它们 我 们 可 以 创建 出 相应 的 


对 象 。 通 过 将 这 些 基本 类 型 封装 成 对 象 ， 我 们 就 可 以 在 其 中 集成 一 些 有 用 的 工作 方法 。 


Number () 、 


VS 


String () 以 及 Boolean() 的 调用 可 分 为 两 种 形式 : 


令 ” 使 用 new 操作 符 调用 一 一 用 于 新 建 对 象 。 


令 不 使 


] new 操作 符 调用 ] 于 将 任意 值 转换 成 基本 数据 类 型 。 


此 外 ， 我 


Eunction ()、 


现在 ， 我 人 


站 还 学 习 了 一 系列 内 建构 造 器 函数 ， 其 中 包括 Object () 、 


Date() 、RegExp () 和 Error () ， 以 及 不 属于 构造 器 的 全 


Array()、 


局 对 象 Math。 


] 应 该 明白 对 象 在 JavaScript 程序 设计 中 的 中 心地 位 ， 几 乎 所 有 的 东西 都 是 
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对 象 ， 或 者 可 以 封装 成 对 象 。 


最 后 ， 让 我 们 再 来 熟悉 一 下 对 象 的 文本 标识 法 〈 见 表 4-2)。 


表 4-2 
名 称 文本 记 法 构造 器 相关 示例 
对 象 {} new Object() {prop: 1} 
数组 [] new Array() [L273 "test"] 
new RegExp('pattern', 
正则 表达 式 /pattern/modifiers /java.*/img 
'modifiers') 


4.4 练习 题 


1 请 看 下 列 代码 ; 


fanctron EY A 


fnet Lion CC() 寺 
return this; 

} 

return CD 


} 


Var oO = new F(); 


请 问 上 面 的 this 值 指向 的 是 全 局 对 象 还 是 对 象 0? 


2. 下 面 代码 的 执行 结果 会 是 什么 ? 


funcetion CG) + 
this.a = 1; 
return false; 


} 


console.log (typeof new C()); 


3， 下 面 这 段 代码 的 执行 结果 又 将 是 什么 ? 


> GE: [Lr 2 [ly 2221} 
SG SO (3 

> c.join('-—-'); 

> console.1log(c); 


4. 在 String () 构造 器 不 存在 的 情况 下 自 定义 一 个 MyString () 的 构造 器 函数 。 记 


住 ， 由 于 String () 不 存在 ， 基 


此 您 在 写 该 构造 器 函数 时 不 能 使 用 任何 局 


用 


a 
岛 


于 内 建 String 


对 象 的 方法 和 属性 。 并 且 要 让 您 所 创建 的 对 象 通 


Vv 


Var s = new MyString('hello'); 
s.length; 


5 


s[0]; 
"hy 


sitoString() 
"hello" 


s.valueoOf () ， 
"hello" 


s.charAt (1); 
wm e" 


seharAt.( 2 0) 
号 下 于 


s.charAt ('e'); 
wm h" 


s.concat(' world!'); 
"hello world!" 


s.slice(1,3); 
wm el wm 


s.slice(0,-1);} 
"hell" 


s.split('e'); 
["h" "llo"] 


SSplitt 1 )s 
["he" ， "o"] 


过 以 下 测试 : 
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-> 将 输入 字符 事 当 做 一 个 数组 ， 用 for 循环 来 进行 


更 新 上 面 的 MyString () 构造 器 ， 为 其 添加 一 个 reverse () 方法 。 


151 


152 JavaScript 面向 对 象 编程 指南 (第 2 版 ) 


~ 
| SN 可 以 尝试 利用 数组 本 身 的 everse() 方 法 。 ] 


6. 在 Array () 构造 器 以 及 相关 的 数组 文本 标识 法 都 不 存在 的 情况 下 ， 自 定义 一 个 类 
似 的 MyArray () 构造 器 ， 并 令 其 通过 以 下 测试 : 


> Var a = new MyArray (1,2,3,"test"); 


> atosteing():; 
L223 testy 


> a.length; 
> ala.length - 1]; 
"test" 


> a.push('boo'); 
5 


> totrinog(t)y 
"1,2,3,test,boo" 


> a.pop(); 
[boo] 


> toOStrindg()y 
12,.3test" 


> LNA( 0) 
"1,2,3,test" 


> a joln( dsnN"t ™)? 
"1 isn't 2 isn't 3 isn't test" 


如 果 您 觉得 这 个 练习 很 有 趣 ， 可 以 不 用 止步 于 join() 方 法 ， 继 续 为 其 创建 尽 可 能 


多 的 方法 。 


7， 在 Math 对 象 不 存在 的 情况 下 ， 创 建 一 个 类 似 的 MyMath 对 象 ， 并 为 其 添加 以 下 方法 : 


全 MyMath.rand (min，max，inclusive) 一 一 随机 返回 min 到 max 区 间 中 的 
一 个 数 ，inclusive 为 true 时 为 团 区 间 〈 这 也 是 默认 情况 )。 


回 


S MyMath.min(array) 返 


目标 数组 中 的 最 小 值 。 


加 


@ MyMath.max(array) 返 


目标 数组 中 的 最 大 值 。 


第 5 章 
原型 


在 本 章 ， 我 们 将 着 重 介绍 函数 对 象 中 的 原型 (Prototype ) 属性 。 对 于 
JavaScript 的 学 习 来 说 ， 理 解 原型 的 工作 原理 是 非常 重要 的 一 环 ， 毕 竟 ， 它 的 对 
象 模型 经 常 被 视 为 是 基于 原型 的 。 当 然 ， 要 理解 原型 其 实 并 不 是 一 件 很 难 的 事 ， 
只 不 过 由 于 这 是 一 个 全 新 的 概念 ， 我 们 接受 起 来 需要 一 点 时 间 罢 了 。 事 实 上 在 
JavaScript 中 ， 像 原型 或 闭 包 ( 见 第 3 章 : 函数 ) 这 样 的 概念 ， 只 要 我 们 能 “ 领 
悟 ” 其 中 的 原理 ， 一 切 都 会 显得 格外 简单 而 清晰 。 而 且 在 后 续 内 容 中 ， 本 书 还 
会 围绕 原型 概念 展开 大 量 的 示例 演示 ， 以 帮助 读者 巩固 并 加 深 对 这 一 概念 的 就 
悉 程 度 。 


总 体 而 言 ， 本 章 将 涉及 以 下 话题 。 

介绍 每 个 函数 都 拥有 的 prototype 属性 ， 而 该 属性 所 存储 的 就 是 原型 对 象 。 
如 何 为 原型 对 象 添加 属性 。 
如 何 使 用 原型 对 象 中 的 新 增 属性 。 
如 何 区 分 对 象 自身 属性 与 原型 属性 。 
”proto 介绍 ， 该 属性 用 于 保存 各 对 象 原 型 的 神秘 链接 。 


原型 方法 简介 , 包括 1sPrototypeOof ()、hasOwnProperty()、propertyIs 


Enumerable () 等 。 


wn 


HS $$ $$ $$ 9 
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令 介绍 如 何 〈 利 用 原型 ) 强化 数组 或 字符 串 这 样 的 内 建 对 象 ( 并 说 明 这 样 做 的 次 端 )。 


5.1 原型 属性 


在 JavaScript 中 ， 函 数 本 身 也 是 一 个 包含 了 方法 和 属性 的 对 象 。 经 过 之 前 的 学 习 ， 相 信 我 
们 对 它 的 一 些 方法 (如 apply() 和 cal1() ) 及 属性 (如 length 和 constructor) 已 经 
不 会 感到 陌生 了 。 接 下 来 ， 我 们 要 介绍 的 是 函数 对 象 的 另 一 个 属性 一 一 prototype。 

众所周知 ， 只 要 我 们 像 下 面 这 样 简单 地 定义 一 个 函数 foo () ， 就 可 以 像 访问 其 他 对 象 
一 样 访问 该 函数 的 属性 : 


> FUnNCELON foo:(ay bt 
return a * b; 
} 
> foo.length 
2 


> foo.constructor; 
function Function(){[native code]} 


而 这 些 〈 在 函数 定义 时 被 创建 的 ) 属性 中 就 包括 有 prototype 属性 ， 它 的 初始 值 是 
一 个 “ 空 ”对 象 。 


> typeof foo.prototype; 
"object" 


当然 ， 我 们 也 可 以 自己 添加 该 属性 ， 就 像 这 样 : 


> foo.PrototyPe = {}; 


而 且 我 们 还 可 以 赋予 这 个 空 对 象 一 些 方法 和 属性 ,这 并 不 会 对 foo 函数 本 身 造成 什么 
影响 ， 因 为 只 有 当 foo0 作 为 构造 器 使 用 时 ， 这 些 属性 才 会 起 作用 。 


5.1.1 利用 原型 添加 方法 与 属性 


在 上 一 章 中 ， 我 们 已 经 学 会 了 如 何 定义 构造 器 函数 ， 并 用 它 来 新 建 〈 构 造 ) 对 象 。 这 
' 做 法 的 主要 意图 是 通过 new 操作 符 来 调用 函数 , 以 达到 访问 对 象 this 值 的 目的 , 然后 ， 
通过 this 我 们 就 可 以 访问 构造 器 所 返回 的 对 象 了 。 这 样 ， 我 们 就 有 了 一 种 赋予 新 建 对 象 


一 定 功能 〈 即 为 其 添加 属性 和 方法 ) 的 方法 。 


下 面 ， 我 们 来 构建 一 个 具体 的 构造 器 函数 Gadget () ， 看 看 它 究 竟 是 如 何在 新 建 对 象 
时 为 其 添加 属性 与 方法 的 。 


function Gadget (name, color) { 


this.name = name; 
this.color = color; 
this.whatAreYou = function()f{ 
return 'IT ama ' + this.color + ' ' + this.name; 


}; 
} 


当然 ， 添 加 属性 和 方法 还 有 另 一 种 方式 ， 即 通过 构造 器 函数 的 prototype 属性 来 增 
加 该 构造 器 所 能 提供 的 功能 。 下 面 就 让 我 们 为 上 面 的 构造 器 增加 两 个 属性 〈price 和 
rating) 和 一 个 方法 〈 即 getInfo() ) 吧 。 由 于 prototype 属性 包含 的 是 一 个 对 象 ， 
所 以 您 可 以 这 样 : 


Gadget.prototype.price = 100; 
Gadget.prototype.rating = 3; 
Gadget.prototype.getInfo = function() { 
return "Rating: ' + this.rating + 
', price: ' + this.price; 


}; 


如 果 您 不 想 将 它们 逐一 添加 到 原型 对 象 中 去 ， 也 可 以 另外 定义 一 个 对 象 ， 然 后 将 其 履 
盖 到 之 前 的 原型 上 : 


Gadget . Prototype = { 
price: 100, 
rating: ... /* and so on... */ 


下 
5.1.2 ”使 用 原型 的 方法 与 属性 
在 向 prototype 属性 中 添加 完 所 有 的 方法 和 属性 后 ， 我 们 就 可 以 直接 用 该 构造 器 来 


新 建 对 象 了 。 例 如 在 下 面 的 代码 中 ， 我 们 用 构造 器 Gadget () 新 建 了 一 个 newtoy 对 象 ， 
然后 您 就 可 以 访问 之 前 所 定义 的 那些 属性 和 方法 了 。 


> Var newtoy = new Gadget ('webcam', 'black'); 
> newtoy.name; 
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"webcam" 


> new 


COVCOLOr; 


"black" 


> new 


"I am 


> new 
100 


> new 


toy.whatAreYou (); 
a black webcam" 


toy.price; 


toy.rating; 


toy.getIinfo(); 


"Rating: 3, price: 100" 


对 于 原型 来 说 ， 最 重要 的 一 点 是 要 理解 它 的 “实时 ”dive) 性 。 由 于 在 JavaScript 中 ， 


几乎 所 有 对 象 都 是 通过 传 引用 的 方式 来 传递 的 ， 因 此 我 们 所 创建 的 每 个 


有 一 份 属于 自己 原型 副本 。 这 也 就 意味 着 我 
一 构造 器 创建 的 所 有 对 象 的 prototype 属性 也 都 会 同时 改变 (甚至 还 


= 


] 可 以 随时 修改 prototyp 


就 已 经 创建 了 的 那些 对 象 )。 


下 面 继续 之 前 的 例子 ， 让 我 们 再 向 原型 中 添加 一 个 新 方法 : 


Gadget.prototype.get = function (what) { 


return this[lwhat]; 


}; 


新 对 象 实体 中 并 没 
e 属性 ， 并 且 由 同 
会 影响 在 修改 之 前 


然后 您 就 会 看 到 ， 即 便 newtoy 对 象 在 get () 方法 定义 之 前 就 已 经 被 创建 了 ,但 我 们 
依然 可 以 在 该 对 象 中 访问 新 增 的 方法 : 


> newtoy.get ('price'); 


100 


> newtoy.get ('color'); 
"black" 


5.1.3 ”自身 属性 与 原型 属性 


在 之 前 关于 getInfo () 的 那个 示例 中 , 我 们 是 使 用 this 指针 来 完成 对 象 访 问 的 , 但 


其 实 直接 引用 Gadget .prototype 也 可 以 完成 同样 的 操作 : 


Gadget.prototype.getInfo = function () { 
return "Rating: ' + Gadget.prototype.rating + 
', price: ' + Gadget.prototype.price; 


这 之 间 会 有 什么 不 同 吗 ? 想 要 回答 这 个 问题 ， 我 们 就 必须 要 更 深入 地 理解 原型 的 工作 
原理 。 
下 面 ， 让 我 们 再 回 到 之 前 的 那个 newtoy 对 象 上 来 : 


> Var newtoy = new Gadget ('webcam', 'black'); 


当 我 们 访问 newtoy 的 某 个 属性 , 例如 newtoy .name 时 , JavaScript 引擎 会 遍历 该 对 
象 的 所 有 属性 ， 并 查找 出 name 属性 。 如 果 找 到 了 就 会 立即 返回 其 值 。 


> newtoy.name; 
"webcam" 


那么 ， 如 果 我 们 访问 rating 属性 又 会 发 生 什 么 呢 ? JavaScript 引擎 依然 会 查询 
newtoy 对 象 的 所 有 属性 ， 但 这 一 回 它 找 不 到 一 个 叫 的 属性 了 。 接 下 来 ， 脚 本 引擎 
就 会 去 查询 用 于 创建 当前 对 象 的 构造 器 函数 的 原型 (等 价 于 我 们 直接 访问 newtoy. 
constructor.prototype)。 de ， 就 立即 使 用 该 属性 。 


> newtoy.rating; 
3 


生 是 一 样 的。 每 个 对 象 都 有 属于 自己 的 构造 器 属性 ， 其 所 


po 


这 种 方式 与 直接 访问 原型 属 1 


引用 的 就 是 用 于 创建 该 对 象 的 那个 函数 ， 所 以 在 这 里 : 
> newtoy.constructor === Gadget; 
true 


> newtoy.constructor.prototype.rating; 
3 


现在 ， 让 我 们 再 仔细 回顾 一 下 整个 过 程 : 首先 我 们 知道 每 个 对 象 都 会 有 一 个 构造 器 ， 
而 原型 本 身 也 是 一 个 对 象 ， 这 意味 着 它 必然 也 有 一 个 构造 器 ， 而 这 个 构造 器 又 会 有 自己 的 
原型 。 于 是 这 种 结构 可 能 会 一 直 不 断 地 持续 下 去 ， 并 最 终 取决 于 原型 链 (prototype 
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chain) 的 长 度 ， 但 其 最 后 一 环 肯定 是 object 内 建 对 象 ， 因 为 它 是 最 高 级 的 父 级 对 象 。 
事实 上 ， 如 果 您 试 着 调用 一 下 newtovy.toString() 的 话 , 由 于 newtoy 对 象 及 其 原型 中 


都 不 存在 tostring () 方 法 。 最 后 我 们 能 调用 的 也 就 只 有 object 对 象 的 tostring () 
方法 了 。 


> newtoy.toString() ， 
" [object Object]" 


5.1.4 利用 自身 属性 重 写 原型 属性 


通过 上 面 的 讨论 ， 我 们 知道 如 果 在 一 个 对 象 自身 属性 中 没有 找到 指定 的 属性 ， 就 会 使 
和 《如 果 存 在 的 话 ) 原型 链 中 查找 到 的 相关 的 属性 。 但 是 ， 如 果 遇 上 对 象 的 自身 属性 与 原 
型 属性 同名 又 该 怎么 办 呢 ? 答案 是 对 象 自身 属性 的 优先 级 高 于 原型 属性 。 
让 我 们 来 看 一 个 具体 的 示例 ， 即 同一 个 属性 名 同时 出 现在 对 象 的 自身 属性 和 原型 
属性 中 : 


好 


> function Gadget (name) { 
this.name = name; 
} 


> Gadget.prototype.name = 'mirror'; 


然后 我 们 新 建 一 个 对 象 ， 并 访问 该 对 象 自身 的 name 属性: 


> Var toy = new Gadget ('camera'); 


> toy.name; 
"camera" 


我 们 可 以 通过 hasownProperty(0 方 法 来 判断 一 个 属性 是 自身 属性 还 是 原型 属性 。 


> toy.hasOwnProperty('name'); 
true 


性 就 会 “ 浮 出 水 面 ”: 


生 ， 同 名 的 原型 忆 


0 
I 广 


这 时 候 ， 如 果 我 们 删除 这 个 属 


> delete toy.name; 


Pe 


true 


> toy.name; 
"mirror" 


> toy.hasOwnProperty('name'); 
false 


当然 ， 我 们 随时 都 可 以 重建 这 个 对 象 的 自身 属性 : 


> toy.name = 'camera'; 
> toy.name; 
"camera" 


如 何 判 断 一 个 对 象 的 某 个 原型 属性 到 底 是 原型 链 中 的 哪个 原型 的 属性 呢 ? 答案 仍然 是 
使 用 hasownProperty0 属 性 。 例 如 ， 我 们 想 知 道 tostring 属性 来 自 于 哪里 : 


> toy.toSstring(); 
"[object Object]" 


> toy.hasOwnProperty('toSstring'); 
false 


> toy.constructor.hasOwnProperty('toSstring'); 
false 


> toy.constructor.Protoype.hasOwnProperty('toString'); 
false 


> Object.hasOwnProperty('toString'); 
false 


> Object.prototype.hasOwnProperty('toSstring'); 
true 


啊 哈 ! 
枚 举 属性 


如 果 想 获得 某 个 对 象 所 有 属性 的 列表 ， 我 们 可 以 使 用 for-in 循环 。 在 倪 2 草 : 套 丰 
族 辣 类型 、 闪 纪 、 入 环 及 习作 下 恬 式 中 ， 我 们 已 经 知道 了 如 何 使 用 该 循环 来 裔 历数 组 中 的 
所 有 元 素 。 当 时 我 们 提 到 ，for 更 适合 数组 而 for-in 更 适合 对 象 。 让 我 们 以 构造 URL 
字符 串 为 例 : 


Var params = { 
productid: 666, 
section: 'products' 


}; 
var url = 'http://example.org/page.php?', 
i, 


query = []; 
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for (i in params) { 
query.push(i + '="' + params[i]); 


} 


Url += query.join('g&'); 


最 后 我 们 得 到 的 变量 url 为 : 


"http://example.org/page.php?productid=666&section=products" 


在 这 里 ， 有 些 细节 需要 留意 。 


令 ”并 不 是 所 有 的 属性 都 会 在 for-in 循环 中 显 


constructor 属性 就 不 会 被 显示 。 


可 以 通过 各 个 对 象 所 提供 的 propertyIs] 
个 属性 是 否 可 枚 举 。 在 ES5 中 ， 我 们 可 以 具体 指定 哪些 属性 可 枚 举 ， 而 在 ES3 中 


没有 这 个 功能 


令 ”原型 链 中 的 各 个 原型 属性 也 会 被 显示 
以 通过 对 象 的 hasOwnProperty () 方法 来 判断 一 个 属性 是 


型 属性 。 


信 ”对 于 所 有 的 原型 属性 , propertyIs 
在 for-in 循环 中 可 枚 举 的 属性 。 


示 。 例 如 (数组 的 ) length 


属性 和 


那些 会 显示 的 属性 被 称 为 是 可 枚 举 的 ， 我 们 


Enumerablel 


Enumerable () 都 


下 面 来 看 看 这 些 方法 具体 是 如 何 使 用 的 。 


function Gadget (name, color) 


this.name = name; 
this..cCoOlL60r .COLOF; 
this.getName = function()f{ 


return this.name; 

}; 
} 
Gadget.prototype.price = 100; 
Gadget.prototype.rating = 3; 


然后 新 建 一 个 对 象 : 


Var newtoy = new Gadget ('webcam', 


"DLack yy 


会 返 


来， 当然 前 提 是 它们 是 可 枚 举 的 。 我 们 可 


对 象 自 身 属 性 


回 false， 


) 方法 来 判断 对 象 的 某 


包括 那些 


首先 , 我 们 来 定义 一 个 简化 版 的 Gadget () : 


现在 ， 如果 对 它 执 行 for-in 循环 ， 就 会 列 出 该 对 象 中 的 所 有 属性 ， 包 括 原型 中 的 


属性 : 


for 
console.log(prop + "= "+ newtoyl[lprop]); 


(Var prop in newtoy) { 


其 结果 甚至 包括 


webcam 
black 
function () { 


name = 
color = 
getName = 
return this.name; 
} 

price = 100 
rating = 3 


该 对 象 的 方法 〈 因 为 方法 本 质 上 也 可 以 被 视 为 是 函数 类 型 的 属性 ): 


如 果 要 对 对 象 属性 和 原型 属性 做 一 个 区 分 ， 就 需要 调 
我 们 可 以 先 来 试 一 下 : 


> newtoy.hasOwnProperty('name'); 


true 


> newtoy.hasOwnProperty('price'); 
false 


下 面 我 们 再 来 循环 一 次 ， 不 过 这 次 只 显示 对 象 的 自身 属性 : 


for (var prop in newtoy) { 
if (newtoy.hasOwnProperty (Prop)) { 
console.log(prop + '="' + newtoy[propl]); 
} 
} 
结果 为 : 


name=webcam 

color=black 

getName=function () { 
return this.name; 


} 


] hasOwnProperty () 方 法 ， 
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现在 我 们 来 试 试 propertyIsEnumerable ()， 该 方法 会 对 所 有 的 非 内 建 对 象 属 ; 
回 true: 


一 一 


生 返 


> newtoy.propertyIsEnumerable('name'); 
true 


而 对 于 内 建 属性 和 方法 来 说 ， 它 们 大 部 分 都 是 不 可 枚 举 的 : 


> newtoy.propertyIsEnumerable('constructor'); 
false 


另外 ， 任 何 来 自 原型 链 中 的 属性 也 是 不 可 枚 举 的 : 


> newtoy.propertyIsEnumerable ('price'); 
false 


但 是 需要 注意 的 是 , 如 果 propertyIsEnumerable () 的 调用 是 来 自 原 型 链 上 的 某 个 
对 象 ， 那 么 该 对 象 中 的 属性 是 可 枚 举 的 。 


> newtoy.constructor.prototype.propertyIsEnumerable('price'); 
true 


5.1.5 ”isPrototypeOf0 方 法 


每 个 对 象 中 都 会 有 一 个 isPrototype0f () 方法， 这 个 方法 会 告诉 我 们 当前 对 象 是 否 
是 另 一 个 对 象 的 原型 。 


让 我 们 先 来 定义 一 个 简单 的 对 象 monkey: 


Var monkey = { 
hair: true, 
feeds: 'bananas', 
breathes: 'air' 


}; 


然后 ， 我 们 再 创建 一 个 叫做 Human () 的 构造 器 函数 ， 并 将 其 原型 属性 设置 为 指向 


monkey: 


function Human (name) { 
this.name = name; 
} 


Human .prototype = monkey; 
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现在 ， 如 果 我 们 新 建 一 个 叫做 george 的 Human 对 象 ， 并 提问 “monkey 是 george 


的 原型 吗 ? ”， 


答案 是 true。 


> var george = new Human( "George ' ) ; 


> monkey.is 
true 


PrototypeOf (george); 


需要 注意 的 是 ， 我 们 在 这 


问题 “mon 
某 个 对 象 原型 是 人 
多 数 浏览 器 都 实现 了 ES5 的 Object.getPr 


是 预先 知道 了 monkey 可 
key 是 你 的 原型 吗 ? ” 然后 获得 一 个 布尔 值 作为 回 
么 的 情况 下 ， 获 得 对 象 的 原型 呢 


台 尼 日 
用 


: george 的 原型 ， 才 提出 了 


应 。 那 么 ， 是 否 能 在 不 知道 
? 答案 是 : 大 多 数 浏览 器 可 以 。 因 为 大 


ototypeof () 方法 


o 


> Object.getPrototypeOf (george) . 工 


"banana" 


ds; 


> Object.getPrototypeOf (george) 
true 


而 对 了 


器 ， 我 们 可 以 使 用 特殊 属性 ”proto。 
5.1.6 ”神秘 的 ”proto “链接 


F 另 一 部 分 实现 了 ES5 部 分 功能 ， 却 没有 实现 getPrototypeof () 方法 的 浏 


=== monkey; 


1 
见 


E 当 前 对 象 中 不 存在 的 属性 时 ， 相 关 的 原型 属 


现在 ， 我 们 已 经 了 解 了 当 我 们 访问 一 个 如 
性 就 会 被 纳入 查询 范围 。 


下 面 让 我 们 改写 一 下 那个 


> var monkey 


{ 
feeds: 'bananas', 
breathes: ‘'air' 
}; 

> function Human() 


{} 


> Human.prototype = monkey; 


这 次 我 们 来 创建 一 个 developer 对 象 ， 
> var developer = 
> developer.f 
> developer.hacks 


new Human () 


ds = 'pizza'; 


'JavaScript'; 


接着 ， 我 们 来 访问 一 些 属性 ， 例 如 deve 


monkey 对 象 做 原型 的 


Human () 对 象 构造 器 。 


并 赋予 它 一 些 属性 : 


loper 对 象 的 hacks 属性 : 
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> developer.hacks; 
"JavaScript" 


当然 ，feeds 也 一 样 可 以 在 该 对 象 中 找到 : 


> developer.feeds; 
"pizza" 


但 breathes 在 developer 对 象 自身 的 属性 中 是 不 存在 的 ,所 以 就 得 去 
就 好 像 其 中 有 一 个 神秘 的 链接 ， 或 者 秘密 通道 指向 了 相关 的 原型 对 象 。 


原型 中 查询 ， 


Se 


> developer.breathes; 
由 要 二 下 


在 现代 JavaScript 环境 中 ， 对 象 中 确实 存在 一 个 指向 相关 原型 的 链接 ， 这 个 神秘 的 链 
接 被 叫做 “proto 属性 (proto 这 个 词 的 两 边 各 有 两 条 下 划 线 )。 


> developer. proto === monkey; 
true 


当然 ， 出 于 学 习 的 目的 来 调用 这 种 神秘 的 属性 是 无 可 厚 非 的 ， 但 如 果 是 在 实际 的 脚本 
编写 中 ， 这 并 不 是 一 个 好 主意 。 因 为 该 属性 在 Internet Explorer 之 类 的 浏览 器 中 是 
不 存在 的 ， 因 此 脚本 就 不 能 实现 跨 平台 了 。 
另外 需要 提示 的 是 ， proto 与 prototype 并 不 是 等 价 的 。 proto 实际 上 
是 某 个 实例 对 象 的 属性 ， 而 prototype 则 是 属于 构造 器 函数 的 属性 。 


> typeof developer. proto ; 
"object" 


a 


> typeof developer.prototype; 
"undefined" 


> typeof developer.constructor.prototype; 
"object" 


千 万 要 记 住 ， _proto 只 能 在 学 习 或 调试 的 环境 下 使 用 。 或 者 如 果 你 的 代码 碰巧 只 需 
要 在 符合 ES5 标准 的 环境 中 使 用 的 话 ， 你 也 可 以 使 用 object .getPrototypeof () 方法 。 


5.2 扩展 内 建 对 象 


4 


在 JavaScript 中 ， 内 建 对 象 的 构造 器 函数 〈 例 如 Array、String、Object 和 
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Function) 都 是 可 以 通过 其 原型 来 进行 扩展 的 。 这 意味 着 我 们 可 以 做 一 些 事情 ， 例 如 只 

要 往 数 组 原型 中 添加 新 的 方法 ， 就 可 以 使 其 在 所 有 的 数组 可 用 。 下 面 ， 我 们 就 来 试 试看 。 

PHP 中 有 一 个 叫做 in_array () 的 函数 ,主要 用 于 查询 数组 中 是 否 存在 某 个 特定 的 值 。 

JavaScript 中 则 没有 一 个 叫做 inArray () 的 方法 (不 过 在 ES5 中 有 index0f() 方 法 )， 因 
此 ， 下 面 我 们 通过 Array .prototype 来 实现 一 个 。 


Array.prototype.inArray = function(needle) { 
for (var i = 0, len = this.length; i < len; i++) { 
if (this[i] === needle) { 
return true; 
} 
} 
return false; 


}; 


现在 ， 所 有 的 数据 对 象 都 拥有 了 一 个 新 方法 ， 我 们 来 测试 一 下 : 


> Var colors = ['red', ‘'green', 'blue']; 
> colors.inArray('red'); 
true 


> colors.inArray('yellow'); 
false 


这 很 简单 ! 我 们 可 以 再 做 一 次 。 假 设 我 们 的 应 用 程序 需要 一 个 反 转 字符 串 的 功能 ， 并 且 也 
觉得 String 对象 应 该 有 一 个 reverse () 方法 ， 毕 竟 Array 对 象 是 有 reverse () 方法 的 。 
其 实 ， 在 string 的 原型 中 添加 一 个 reverse() 方法 也 很 容易 ， 我 们 可 以 借助 于 
Array.prototype. reverse() 方 法 (这 与 第 4 章 : 对 象 中 的 某 道 练习 题 很 相似 )。 


String.prototype.reverse = function() { 
return Array.prototype.reverse. 
apply (this.split('')).join(''); 
} 


在 这 段 代码 中 ,我 们 实际 上 是 先 利用 split () 方法 将 目标 字符 串 转换 成 数组 ， 然 后 再 
调用 该 数组 的 reverse () 方 法 产生 一 个 反 疝 数组 ,最 后 通过 join () 方法 将 结果 数组 转换 
为 字符 串 。 下 面 我 们 来 测试 一 下 这 个 新 方法 。 


> "bumblebee".reverse () ， 
"eebelbmub" 
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是 个 好 名 字 ， 听 起 来 就 像 某 种 很 大 的 、 非 常 吓 人 的 《而 


毛 苷 


秘 生物 ， 不 
5.2.1 关于 扩展 内 建 对 象 的 讨论 
由 于 通过 
0 
能 力 时 就 必须 慎之 又 慎 。 
原因 在 于 一 旦 开发 者 熟悉 了 JavaScript, 为 
会 预期 JavaScript 内 建 对 象 与 方法 和 他 的 认 知 相同 。 
发 生 改 变 ， 代 码 的 用 户 与 维护 者 就 会 觉得 困惑 ， 
而 且 ，JavaScript 自身 也 会 发 展 ， 浏 览 器 厂商 支 
缺失 的 ， 想 通过 原型 来 扩展 的 功能 ， 明 天 就 会 出 现在 内 建 方法 中 。 
计 的 方法 就 不 被 需要 了 。 男 外 ， 假 设 我 们 已 经 编写 了 大 量 的 代码 ，i 
对 象 扩展 而 来 的 自 定 义 方法 ， 而 这 
这 些 自 定 义 方 法 又 与 新 的 内 建 方法 有 些许 不 同 ， 


是 吗 ? 


在 这 


情况 下 ， 


的 ) 神 


十 原型 来 扩展 内 建 对 象 是 一 项 非常 强大 的 技术 ， 有 了 它 ， 我 们 几乎 可 以 随心 所 
塑 JavaScript 语言 的 能 力 。 但 也 正 是 由 于 它 有 如 此 强大 的 威力 ， 我 们 在 选择 使 用 这 


8 么 无 论 他 在 用 哪些 第 三 方 库 或 者 工具 ， 他 都 
一 旦 修改 了 内 建 对 象 ， 它 们 的 行为 会 
从 而 导致 无 法 预期 的 错误 。 
持 的 功能 会 越 来 越 多 ,没准 我 们 今天 所 


我 们 设 


这 些 代 码 都 是 基于 基本 


文 些 方法 后 来 又 被 浏览 器 厂商 实现 为 内 建 方法 了 ， 但 
这 个 时 候 会 发 生 什么 呢 ? 


我 们 


转生 已 y 


[1 自 定义 方法 


其 实 对 基于 相关 内 建 原型 来 增 力 
子 ， 是 实现 让 老式 浏览 器 支持 新 
为 现代 浏览 器 所 实现 的 新 功能 。 例 如 
做 shims 或 者 polyfills。 


另外 ， 当 您 用 自 定义 方法 扩展 原型 时 ， 首 先 应 该 检查 该 方法 


让 | 


这 种 技术 来 说 ， 最 常用 且 
功能 ， 而 且 应 该 是 已 被 ECMAScript 委员 会 
日 版 正 支持 ES5 中 的 方法 。 我 们 通常 把 这 类 扩展 叫 


取 及 做 
会 标 ; 


览 器 内 存在 同名 内 建 方法 时 ， 我 们 可 以 直接 调用 原生 方法 ， 


当 浏 


接受 的 例 


准 化 了 的 、 


是 否 已 经 存在 。 这样 一 来 ， 
这 就 避免 了 方法 


履 盖 。 在 


下 面 的 例子 中 , 我们 将 为 String 对 象 添 加 trim0 方 法 。 该 方法 是 ES5 标准 的 


其 


在 老式 浏览 器 中 并 没有 得 到 支持 : 
了 下 
String.prototype.trim = function 


(typeof String.prototype.trim !=== '" function" ){ 
() { 

return this.replace(/^\st|\st&/g, '' ); 

}; 
} 


LO tm 
"hello" 
最 佳 实践 
Q 如 果 您 想 要 通过 原型 为 某 个 对 象 添加 一 个 新 属性 ， 
务必 先 检 查 一 下 该 属性 是 否 已 经 存在 。 


部 分 ， 但 


5.2.2 ”原型 陷阱 


在 处 理 原 型 问题 时 ， 我 们 需要 特别 注意 以 下 两 种 行为 。 

4 当 我 们 对 原型 对 象 执 行 完全 蔡 换 时 ， 可 能 会 触发 原型 链 中 茶 种 异常 〈exception )。 
全 prototype.constructor 属性 是 不 可 靠 的 。 

下 面 ， 我 们 来 新 建 一 个 简单 的 构造 器 函数 ， 并 用 它 再 创建 两 个 对 象 : 


{ 


true; 


> function Dog() 
this.tail 
} 


> Var benji = new Dog(); 


> Var rusty = new Dog(); 


即便 在 benji 和 rusty 对 象 创建 之 后 
在 属性 被 添加 之 前 就 已 经 存在 的 对 象 也 可 
say () 方法 进去 : 


> Dog.prototype.say = function(){ 
return 'Woof!'; 


}; 


这 样 ， 


> benji.say(); 
"Woof!" 


> rusty.say(); 
"Woof!" 


如 果 我 们 检查 一 下 这 些 对 象 构造 器 函数 ， 就 会 发 现 一 切 正 


> benji.constructor === Dog; 
true 
> rusty.constructor === Dog; 
true 


， 我 们 也 依然 能 为 Dog () 的 原型 添加 属性 ， 并 
以 随时 访问 这 些 新 属性 。 现 在 ， 让 我 们 放 一 个 


下 


元 


上 面 的 两 个 对 象 都 可 以 访问 该 新 方法 了 : 


上吊。 


现在 ， 我们 用 一 个 


自 定义 的 新 对 象 完 全 覆盖 掉 原 有 的 原型 对 象 : 
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> Dog.prototype = { 
paws: 4, 
hair: true 


和 


事实 证 明 ， 这 会 使 原 有 对 象 不 能 访问 原型 的 新 增 属 


与 原 有 的 原型 对 象 保 持 联系 。 


> typeof benji.paws; 
"undefined" 


> benji.say(); 
"Woof!" 


> typeof benji. proto .say; 
"function" 


> typeof benji. proto .paws; 
"undefined" 


全 


FE， 它们 依然 通过 那个 神秘 的 链接 


而 我 们 之 后 创建 的 所 有 对 象 使 用 的 都 是 被 更 新 后 的 prototype 对 象 。 


人 


> Var lucy = new Dodg() 
> lucy.say(); 


TypeError: lucy.say is not a function 


> lucy.paws; 


> typeof lucy. proto .say; 
"undefined" 


> typeof lucy. proto .paws; 
"number" 


但 这 时 候 ， 新 对 象 的 constructor 属 怕 


引 月 


日 却 指向 了 object () 。 


> lucy.constructor; 
function Object() { [native codel]} 


就 不 能 再 保持 


并 有 旦 ， 其 秘密 链接 ”proto 也 指向 了 新 的 prototype 对 象 : 


E 确 了 ， 原 本 应 该 是 Dog () 的 


> benji.constructor; 
function Dog(){ 
this.tail = true; 


} 


当然 ， 我 们 可 以 通过 重新 设置 constructor 属性 来 解决 上 述 所 有 的 异常 行为 : 


> function Dog() {} 


> Dog.prototype = {}; 
> new Dog () .constructor === Dog; 
false 


> Dog.prototype.constructor = Dog; 


> new Dog() .constructor === Dog; 
true 
和 最 佳 实践 
SN 当 我 们 重 写 茶 对 象 的 prototype 时 , 需要 重 置 相 
应 的 constructor 属性 。 


5.3 本章 小 结 


现在 ， 让 我 们 来 总 结 一 下 本 章 所 讨论 的 几 个 最 重要 的 话题 : 

在 JavaScript 中 ,所 有 函数 都 会 拥有 一 个 叫做 prototype 的 属性 ， 默 认 初 始 值 为 
“ 空 ” 对 象 〈 没 有 自身 属性 的 对 象 )。 

令 ”我 们 可 以 在 相关 的 原型 对 象 中 添加 新 的 方法 和 属性 ， 甚 至 可 以 用 自 定义 对 象 来 完 
全 蔡 换 掉 原 有 的 原型 对 象 。 

令 ” 当 我 们 通过 某 个 构造 器 函数 来 新 建 对 象 时 (使 用 new 操作 符 )， 这 些 对 象 就 会 自 
动 拥有 一 个 指向 各 自 prototype 属性 的 神秘 链接 ， 并 且 可 以 通过 它 来 访问 相关 
原型 对 象 的 属性 。 

人 对 象 自身 属性 的 优先 级 要 高 于 其 原型 对 象 中 的 同名 属性 。 

令 ”我 们 可 以 通过 hasownProperty() 方 法 来 区 分 对 象 自身 属性 和 原型 属性 。 


信 ”原型 链 的 存在 : 如 果 我 们 在 一 个 对 象 foo 中 访问 一 个 并 不 存在 的 属性 bar， 即 当 
我 们 访问 foo .bar 时 ，JavaScript 引 敬 就 会 搜索 该 对 象 的 原型 的 bar 属性 。 如 果 


0 


Pe 
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依然 没有 找到 bar 属性 ， 则 会 继续 搜索 其 原型 的 原型 ， 以 此 类 推 ， 直 到 搜索 到 


Object .Prototype。 


令 我 们 可 以 对 内 建 的 构造 器 函数 进行 扩展 ， 以 便 所 有 的 对 象 都 能 引用 我 们 添加 的 功 
能 。 如 果 将 某 个 函数 赋值 给 Array.prototype.flip， 所 有 的 数组 对 象 都 能 立 


的 适应 能 力 。 


5.4 练习 题 


即 增添 一 个 f1ip (0) 方 法 ,如 [1,2，3].fLip()。 另 外 ， 在 添加 相关 的 方法 和 属 
性 之 前 ， 应 该 做 一 些 对 已 有 方法 的 检测 工作 ， 这 将 会 大 大 增加 脚本 对 于 未 来 环境 


1. 创建 一 个 名 为 shape 的 对 象 ， 并 为 该 对 象 设置 一 个 type 属性 和 一 个 getType0 方 法 。 
2. 定义 一 个 原型 为 shape 的 Triangle() 构 造 器 函数 , 用 Triangle () 创 建 的 对 象 


应 该 具有 三 个 对 象 属性 一 一 a、pb、c， 分 别 用 于 表示 三 角形 的 三 条 边 。 
3.， 在 对 象 原型 中 添加 一 个 名 为 getPerimeter () 的 新 方法 。 
4. 使 用 下 面 的 代码 来 测试 您 之 前 的 实现 : 


> var t = new Triangle(1, 2, 3); 
> t.constructor === Triangle; 
true 


> shape.isPrototypeof (七 ) 
true 


> t.getPerimeter () ; 
6 


> 七 .getTyYype () ; 
"triangle" 


5， 用 循环 遍历 对 象 上 上 ， 列 出 其 所 有 的 属性 和 方法 〈 不 包括 原型 部 分 的 )。 


6.， 实现 随机 打 乱 函数 snuffle0O， 执 行 效果 如 下 : 


> [1,2,3,4,5,6,7,8,9] .shuffle(); 
区 区 dp LB 9 Or -9 3 


第 6 章 
继承 


如 果 回 顾 一 下 我 们 在 第 1 章 : 面向 对 象 的 JavaScript 中 所 讨论 的 内 容 ， 就 会 
发 现 ， 我 们 当时 所 列 出 的 、 有 关 JavaScript 中 面向 对 象 程序 设计 的 各 项 话题 ， 现 
在 几乎 都 已 经 涉及 了 。 我 们 了 解 了 对 象 、 方 法 与 属性 。 我 们 也 知道 了 JavaScript 
中 没有 类 的 概念 ， 但 可 以 用 构造 器 函数 来 实现 相同 的 功能 。 有 封装 吗 ? 显然 有 ， 
对 象 本 身 就 包括 数据 以 及 与 这 些 数据 有 关 的 行为 《 即 方法 ) 有 聚合 吗 ? 当然， 
一 个 对 和 象 中 可 以 包含 其 他 对 象 ， 事 实 上 也 一 直 如 此 ， 因 为 对 象 方法 是 靠 函 数 来 实 
现 的 ， 而 函数 本 身 就 是 对 象 。 


下 面 ， 就 让 我 们 把 焦点 转移 到 有 关 继 承 〈inheritance) 的 部 分 吧 。 毕 
要 的 特性 ， 正 因为 有 了 它 ， 我 们 才能 实现 代码 的 重用 ， 做 点 偷懒 的 事 
计算 机 程序 设计 的 初衷 吗 ? 

JavaScript 是 一 种 动态 的 程序 设计 语言 , 因而 它 对 于 同一 个 任务 往往 会 同时 存在 几 种 不 
同 的 解决 方案 。 在 继承 问题 上 也 不 例外 。 在 本 章 中 ， 我 们 将 为 您 介绍 一 系列 常见 的 继承 模 
式 。 只 有 很 好 地 理解 这 些 模式 ， 我 们 才能 在 具体 的 工程 中 选择 正确 的 模式 或 模式 组 合 。 


6.1 原型 链 


竟 这 也 是 个 非常 重 
这 不 正 是 我 们 从 事 


让 我 们 先 从 默认 的 继承 模式 开始 ， 即 通过 原型 来 实现 继承 关系 链 。 
正如 我 们 之 前 所 了 解 的 , JavaScript 中 的 每 个 函数 中 都 有 一 个 指向 某 一 对 象 的 prototype 
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属性 。 该 函数 被 new 操作 符 调 用 时 会 创建 并 返回 一 个 对 象 ， 并 且 该 对 象 中 会 有 一 个 指向 其 
原型 对 象 的 秘密 链接 。 通 过 该 秘密 链接 〈 在 某 些 环境 中 ， 该 链接 名 为 “Proto_ )， 我 们 
就 可 以 在 新 建 的 对 象 中 调用 相关 原型 对 象 的 方法 和 属性 。 

而 原型 对 象 自身 也 具有 对 象 固有 的 普遍 特征 ， 因 此 本 身 也 包含 了 指向 其 原型 的 链接 。 
此 就 形成 了 一 条 链 ， 我 们 称 之 为 原型 链 。 
如 图 6-1 所 示 ， 在 对 象 A 的 一 系列 属性 中 ， 有 一 个 叫做 _proto_ 的 隐藏 属 性 ， 它 指 
向 了 男 一 个 对 象 B。 而 B 的 _proto 属性 又 指向 了 对 象 C， 以 此 类 推 ， 直 至 链条 末端 的 
Object 对 象 ， 该 对 象 是 JavaScript 中 的 最 高 级 父 对 象 ， 语 言 中 所 有 对 象 都 必须 继承 自 它 。 


这 些 都 很 好 理解 ， 但 这 有 什么 实际 意义 吗 ? 显然 有 ， 正 因为 有 了 这 些 技术 ， 我 们 才 可 
以 在 某 个 属性 不 在 对 象 A 中 而 在 对 象 B 中 时 ,依然 将 它 当做 A 的 属性 来 访问 。 同 样 的 ， 如 
果 对 象 B 中 也 没有 该 属性 ， 还 可 以 继续 到 对 象 C 中 去 寻找 。 这 就 是 继承 的 作用 ， 它 能 使 每 
个 对 象 都 能 访问 其 继 承 链 上 的 任何 一 个 属性 。 
在 后 面 内 容 中 ， 我 们 将 会 演示 一 系列 不 同 的 继承 应 用 ， 这 些 示 例 将 由 一 组 层次 分 明 的 
结构 组 成 。 具 体 地 说 ， 就 是 一 组 以 通用 性 对 象 Shape 为 父 对 象 的 二 维 图 形 对 象 序列 (包括 


Triangle、Rectangle 等 )。 


6.1.1 原型 链 示例 


原型 链 是 JavaScript 中 实现 继承 的 默认 方式 。 下 面 ， 我 们 就 用 这 种 方式 来 实现 之 前 所 
描述 的 层次 结构 吧 ， 首 先 我 们 来 定义 三 个 构造 器 函数 : 


function Shape()f{ 
this.name = 'Shape'; 
this.. toString = Eunction() { 
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return this.name; 
}; 
} 


function TwoDShape()f{ 
this.name = '2D shape'; 


} 


function Triangle (side, height) { 


this.name = 'Triangle'; 
this.side = side; 
this.height = height; 
this.getArea = function()f{ 


return this.side * this.height / 2; 
}; 
} 


接 下 来 ， 就 是 我 们 施展 继承 魔法 的 代码 了 : 


TwoDShape .prototype = new Shape () 
Triangle.prototype = new TwoDShape (); 


明白 上 面 发 生 了 什么 吗 ? 在 这 里 ， 我 们 将 对 象 直接 创建 在 TwoDShape 对 象 的 
prototype 属性 中 , 并 没有 去 扩展 这 些 对 象 的 原 有 原型 ,也 就 是 说 , 我们 用 构造 器 Shape () 
(通过 new 操作 符 ) 另 建 了 一 个 新 的 对 象 ， 然 后 用 它 去 覆盖 TwoDShape 构造 器 的 
prototype 属性 。Triangle 对 象 也 一 样 ， 它 的 prototype 属性 是 由 构造 器 
TwoDShape () 负责 重建 的 (通过 new 操作 符 )。 切 记 : JavaScript 是 一 种 完全 依靠 对 象 的 
语言 ， 其 中 没有 类 〈class) 的 概念 。 因 此 我 们 需要 直接 用 new Shape () 构造 一 个 实体 ， 

然后 才能 通过 该 实体 的 属性 完成 相关 的 继承 工作 ,而 不 能 直接 继承 Shape () 构造 器 。 另 外 
这 也 确保 了 在 继承 实现 之 后 ， 我 们 对 Shape () 所 进行 的 任何 修改 、 重 写 甚至 删除 ， 都 不 会 


对 TwoDShape () 产 生 影响 ， 因 为 我 们 所 继承 的 只 是 由 该 构造 器 所 建 的 一 个 实体 。 

正如 在 上 一 章 中 所 提 到 的 ， 当 我 们 对 对 象 的 prototype 属性 进行 完全 替换 时 〈 这 不 同 于 
向 prototype 指向 的 对 象 添加 属性 ), 有 可 能 会 对 对 象 constructor 属性 产生 一 定 的 副作用 。 
所 以 ， 在 我 们 完成 相关 的 继承 关系 设 定 后 ， 对 这 些 对 象 的 constructor 属性 进行 相应 的 重 置 
是 一 个 非常 好 的 习惯 。 


TwoDShape .prototype.constructor = TwoDShape; 


Triangle.prototype.constructor = Triangle; 
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下 面 ， 我 们 来 测试 一 下 目前 为 止 所 实现 的 内 容 ， 先 创建 一 个 Triangle 对 象 ， 然 后 调 
j 它 的 getArea () 方法: 


> Var my = new Triangle(5，10)， 
> my.getArea (); 
25 


尽管 my 对 象 中 并 没有 属于 自己 的 toString () 方法， 但 我 们 依然 可 以 调用 它 所 继承 
的 toString () 方 法 。 请 注意 ， 虽 然 我 们 这 里 调用 的 是 一 个 继承 方法 ， 但 this 所 指向 的 
依然 是 my 对 象 。 


TS 


> my.toString() ， 
"Triangle" 


下 面 ， 我 们 来 关注 一 下 JavaScript 引 敬 在 my .toString () 被 调用 时 究竟 做 了 哪些 事 : 
令 首先 ， 它 会 遍历 my 对 象 中 的 所 有 属性 ， 但 没有 找到 一 个 叫做 toString () 的 方法 。 


令 接着 再 去 查看 my. proto 所 指向 的 对 象 ， 该 对 象 应 该 是 在 继承 关系 构建 过 程 
中 由 new TwoDShape () 所 创建 的 实体 。 


令 ”显然 ,JavaScript 引擎 在 遍历 TwoDShape 实体 的 过 人 toSstring () 
方法 ， 然 后 ， 它 又 会 继续 检查 该 实体 的 _proto 属性 。 这 时 候 , 该 _proto 
属性 所 指向 的 实体 是 由 new Shape () 所 创建 的 。 


令 终于， 在 new Shape () 所 创建 的 实体 中 找到 了 toString () 方法。 
令 最后， 该 方法 就 会 在 my 对 象 中 被 调用 ， 并 且 其 this 也 指向 了 my。 


如 果 我 们 向 my 对 象 询 问 :“ 您 的 构造 器 函数 是 哪 一 个 ? ” 它 应 该 是 能 够 给 出 正确 答案 
的 。 因 为 我 们 在 构建 继承 关系 时 已 经 对 相关 的 constructor 属性 进行 了 重 置 。 


> my.constructor === Triangle; 
true 


通过 jnstanceof 操作 符 ， 我 们 可 以 验证 my 对 象 同时 是 上 述 三 个 构造 器 的 实例 : 


> my instanceof Shape; 
true 


> my instanceof TwoDShape; 
true 
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> my instanceof Triangle; 


true 


> my instanceof Array; 


false 


同样 的 ， 当 我 们 以 my 参数 调用 这 些 构造 器 原型 的 1sPropertypeof () 方 法 时 , 结果 
也 是 如 此 : 


> Shape.prototype.isPrototypeOf (my); 
true 


> TwoDShape .prototype.isPrototypeOf (my); 
true 


> Triangle.prototype.isPrototypeof (my); 


true 


> String.prototype.isPrototypeOf (my); 
false 


我 们 也 可 以 用 其 他 两 个 构造 器 来 创建 对 象 ， 用 new TwoDShape () 所 创建 的 对 象 也 可 
以 获得 继承 自 Shape () 的 toString () 方 法 。 


> Var td = new TwoDShape(); 
> td.constructor === TwoDShape; 
true 


> td.toSstring(); 
"2D shape" 


> Var s = new Shape(); 
> s.constructor === Shape; 
true 


6.1.2 ”将 共享 属性 迁移 到 原型 中 去 


当 我 们 用 某 一 个 构造 器 创建 对 象 时 ， 其 属性 就 会 被 添加 到 this 中 去 。 并 且 当 被 添加 
的 属性 实际 上 不 会 随 着 实体 改变 时 ， 这 种 做 法 会 显得 很 没有 效率 。 壁 如 在 上 面 的 示例 中 ， 
Shape () 构造 器 是 这 样 定义 的 : 
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function Shape(){ 


this.name = 'Shape'; 


} 


这 种 实现 意味 着 我 们 用 new shape () 创建 的 每 个 实体 都 会 拥有 一 个 全 新 的 name 


性 ， 并 在 内 存 中 拥有 自己 独立 的 存储 空间 。 而 事实 上 ， 我 们 也 可 以 选择 将 name 属性 添加 
到 原型 上 去 ， 这 样 一 来 所 有 实体 就 可 以 共享 这 个 属性 了 : 

function Shape() {} 

Shape.prototype.name = 'Shape'; 


这 样 一 来 ， 当 我 们 再 用 new Shape () 新 建 对 象 时 ，name 属性 就 不 再 是 新 对 象 的 私有 属 


局 
于 


hy 


性 了 ， 而 是 被 添加 进 了 该 对 象 的 原型 中 。 虽 然 这 样 做 通常 会 更 有 效率 ， 但 这 也 只 是 针对 对 象 实 


体 中 的 不 可 变 属 性 而 言 的 ， 对 象 的 共有 方法 尤其 适合 这 种 共享 形式 。 


现在 ， 让 我 们 来 改善 一 下 之 前 的 示例 ， 将 其 所 有 的 方法 和 那些 符合 条 件 的 属性 添加 到 


原型 对 象 中 去 ， 就 Shape () 和 TwoDShape () 而 言 ， 几 乎 所 有 东西 都 是 可 以 共享 的 : 


// constructor 
function Shape() {} 


// augment prototype 
Shape.prototype.name = 'Shape'; 


Shape.prototype.toString = function() { 
return this.name; 


这 


// another constructor 
function TwoDShape(){} 


// take care of inheritance 
TwoDShape .prototype = new Shape () 
TwoDShape .prototype.constructor = TwoDShape; 


// augment prototype 


TwoDShape.prototype.name = '2D shape'; 


如 您 所 见 ， 我 们 通常 会 在 对 原型 对 象 进行 扩展 之 前 ， 先 完成 相关 的 继承 关系 构建 ， 
则 TwoDShape .prototype 中 的 后 续 新 内 容 有 可 能 会 抹 掉 我 们 所 继承 来 的 东西 。 


不 
口 
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而 Triangle 构造 器 的 情况 稍 许 有 些 不 同 ， 因 为 由 new Triangle () 所 创建 的 各 个 
对 象 所 表示 的 三 角形 在 尺寸 上 各 不 相同 。 因 此 ， 该 对 象 的 side 和 height 这 两 个 属性 必 


须 保 持 自 身 所 有 ， 


而 其 他 属性 则 可 以 设置 共享 。 例 如 ， 方 法 getarea () 的 计算 方式 并 不 


会 随 着 每 个 Triangle 实例 而 改变 。 另 外 ， 需 要 再 强调 一 次 ， 我 们 必须 在 扩展 原型 对 象 之 


前 完成 继承 关系 的 构建 。 


function Triangle (side, height) { 


this.side 


= side; 


this.height = height; 


} 


// take care of inheritance 


Triangle.prototype = new TwoDShape (); 
Triangle.prototype.constructor = Triangle; 


// augment prototype 


Triangle.prototype.name = 'Triangle'; 
Triangle.prototype.getArea = function()f{ 


return this.side * this.height / 2; 


}; 


修改 完成 之 后 ， 之 前 所 有 的 测试 代码 都 可 以 同样 的 方式 应 用 于 当前 版 本 ， 例 如: 


> Var my = new Triangle (5, 10); 


> my.getArea (); 


25 


> my.toSstring(); 


"Triangle" 


如 您 所 见 ， 实 际 上 调用 my .toString() 的 区 别 仅仅 存在 于 幕后 的 某 些 少量 操作 。 主 


要 区 别 也 就 是 方法 的 查找 操作 将 更 多 地 发 生 在 shape .prototype 中 , 而 不 再 需要 像 前 面 


示例 中 那样 ， 


到 由 


new Shape () 所 创建 的 实体 对 象 中 查找 了 。 


另外 ， 我 们 也 可 以 通过 hasownProperty () 方法 来 明确 对 象 自身 属性 与 其 原型 链 属 


性 的 区 别 。 


> my.hasOwnProperty('side'); 


true 


> my.hasOwnProperty('name'); 


false 


178 JavaScript 面向 对 象 编程 指南 (第 2 版 ) 


而 调用 ijsPrototypeof () 方 法 和 instanceof 操作 符 的 工作 方式 与 之 前 并 无 区 别 ， 
例如 : 


> TwoDShape .prototype.isPrototypeoOf (my); 
true 


> my instanceof Shape; 
true 


6.2 只 继承 于 原型 


正如 上 面 所 说 ， 出 于 效率 考虑 ， 我 们 应 该 尽 可 能 地 将 一 些 可 重用 的 属性 和 方法 添加 到 
原型 中 去 。 如 果 形 成 了 这 样 一 个 好 习惯 ， 我 们 仅仅 依靠 原型 就 能 完成 继承 关系 的 构建 了 。 
于 原型 中 的 所 有 代码 都 是 可 重用 的 , 这 意味 着 继承 自 Shape .prototype 比 继承 自 new 
Shape () 所 创建 的 实体 要 好 得 多 。 上 毕竟 ，new Shape () 方式 会 将 Shape 的 属性 设 定 为 对 
象 自身 属性 ， 这 样 的 代码 是 不 可 重用 的 (因而 要 将 其 设置 在 原型 中 ), 但 我 们 可 采取 以 下 方 
式 对 效率 做 一 些 改善 


令 ”不 要 单独 为 继承 关系 创建 新 对 象 。 


下 面 就 是 更 改 后 的 代码 ， 我 们 用 加 粗 显 示 被 修改 的 部 分 : 


function Shape(){} 
// augment prototype 


Shape.prototype.name = 'shape'; 


Shape.prototype.toString = function() { 
return this.name; 


}; 


function TwoDShape() {} 

// take care of inheritance 

TwoDShape .prototype = Shape .prototype; 
TwoDShape .prototype.constructor = TwoDShape; 
// augment prototype 
TwoDShape.prototype.name = '2D shape'; 


function Triangle (side, height) { 
this.side = side; 
this.height = height; 
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// take care of inheritance 
Triangle.prototype = TwoDShape.prototype; 
Triangle.prototype.constructor = Triangle; 
// augment prototype 
Triangle.prototype.name = 'Triangle'; 


Triangle.prototype.getArea = function()f{ 
return this.side * this.height / 2; 
} 


测试 结果 依然 相同 : 


> Var my = new Triangle (5, 10); 
> my.getArea (); 
25 


> my.toSstring(); 
"Triangle" 


但 是 ， 这 样 做 会 令 my .toString () 方 法 的 查找 有 什么 网 首先 ，JavaScript 引 
擎 同样 会 先 查 看 my 对 象 中 有 没有 toString () 方 法 。 自 然 ， 它 不 会 找到 ， 于 是 就 会 转 
而 去 搜索 该 对 象 的 原型 属性 。 此 时 该 原型 已 经 指向 了 TwoDShape 的 原型 , 而 后 者 指向 的 
又 是 Shape.prototype。 更 重要 的 是 ， 由 于 这 里 所 采用 的 都 是 引用 传递 而 不 是 值 传递 ， 
所 以 这 里 的 方法 查询 步骤 由 (之 前 示例 中 的 ) 四 步 或 (本 章 首 例 中 的 ) 三 步 直接 被 精简 


这 样 简 单 地 找 贝 原型 从 效率 上 来 说 固然 会 更 好 一 些 ， 但 也 有 它 的 副作用 。 由 于 子 对 象 


与 父 对 象 指向 的 是 同一 个 对 象 ， 所 以 一 旦 子 对 象 对 其 原型 进行 了 修改 ， 父 对 象 也 会 随即 被 
改变 ， 甚 至 所 有 的 继承 关系 也 都 是 如 此 。 

列 如 下 面 这 行 代码 : 

Triangle.prototype.name = 'Triangle'; 


它 对 name 属性 进行 了 修改 ， 于 是 Shape .prototype .name 也 随 之 被 改变 了 。 也 就 是 
说 ， 当 我 们 再 用 new Shape () 新 建 对 象 时 ， 新 对 象 的 name 属性 也 会 是 Triangle: 


> Var s = new Shape(); 
> s.name; 
"Triangle" 
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因而 ， 这 种 方法 虽然 效率 更 高 ， 但 在 很 多 应 用 场景 中 并 不 适合 使 有 


临时 构造 器 一 一 new FO 


TH 


到 子 对 象 属性 的 影响 。 要 解决 这 个 问题 ， 就 必须 利用 某 种 中 


介 来 打破 这 


正如 上 面 所 说 ， 如 果 所 有 prototype 属性 都 指向 了 一 个 相同 的 对 象 ， 父 对 象 就 会 受 


' 连 锁 关 系 。 我 们 


可 以 用 一 个 临时 构造 器 函数 来 充当 中 介 。 即 我 们 创建 一 个 空 函 数 F ()， 


父 级 构造 器 。 然 后 ， 我 们 既 可 以 用 new F () 来 创建 一 些 不 包含 父 对 象 属 怕 


可 以 从 父 对 象 prototype 属性 中 继承 一 切 了 。 
下 面 是 修改 之 后 的 代码 : 


function Shape(){} 
// augment prototype 


Shape.prototype.name = 'Shape'; 
Shape.prototype.toString = function() 
return this.name; 


}; 


function TwoDShape() {} 

// take care of inheritance 
var F = function() {}; 
F.prototype = Shape .prototype; 
TwoDShape .prototype = new F(); 


{ 


TwoDShape .prototype.constructor = TwoDShape; 


// augment prototype 
TwoDShape .Prototype .name = '2D shape'; 


function Triangle (side, height) { 
this.side = side; 
this.height = height; 

} 

// take care of inheritance 

Var F = function(){}; 

F.prototype = TwoDShape .prototype; 

Triangle.prototype = new F(); 


Triangle.prototype.constructor = Triangle; 


// augment prototype 
Triangle.prototype.name = 'Triangle'; 


Triangle.prototype.getArea = function(){ 
return this.side * this.height / 2; 
}; 


并 将 其 原型 设置 为 


FE 的 对 象 ， 同 时 又 
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下 面 ， 我 们 来 创建 一 个 triangle 对 象 ， 并 测试 其 方法 : 
> Var my = new Triangle (5, 10); 

> my.getArea (); 

25 

> my.toSstring(); 

"Triangle" 

通过 这 种 方法 ， 我 们 就 可 以 保持 住 原型 链 : 

> my. proto === Triangle.prototype; 

true 

> my. proto .constructor === Triangle; 

true 

> my. Proto.. .PEGEO === TwoDShape.prototype; 
true 

> my. proto . proto . proto .constructor === Shape; 
true 


2 


并 且 父 对 象 的 属性 不 会 被 子 对 象 所 履 盖 : 


s = new Shape () 


> SB:s Domes 


nm Shape" 


> "I ama " + new TwoDShape(); // calling toString() 


"I am 


与 此 同时 ， 该 方法 也 对 一 种 意见 提供 了 支持 : 将 所 有 要 共享 的 属性 
围绕 原型 构建 继承 关系 。 也 就 是 说 ， 这 种 主张 不 鼓励 将 对 象 的 自身 属性 纳入 继 


中 ， 然 后 只 


a 2D shape" 


承 关 系 ， 因 为 自身 属性 往往 随 对 象 的 不 同 而 差别 甚大 ， 


6.3 uber 一 子 对 象 访问 父 对 象 的 方 


在 传统 
特殊 语法 ， 


无 法 重用 。 


式 


类 通常 就 要 去 调用 父 类 中 的 同名 方法 ， 以 便 最 终 完成 ] 


[ 作 。 


和 助 。 


与 方法 添 力 


I 到 原型 


的 面向 对 象 语言 中 ， 通 常 都 会 提供 一 种 用 于 子 类 访问 父 类 《〈《 有 时 也 叫 超 类 ) 的 


因为 我 们 在 实现 子 类 方法 往往 需要 其 父 类 方法 的 额外 加 在 这 种 情况 下 ， 子 
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JavaScript 中 虽然 没有 这 种 特殊 语法 ， 但 是 要 实现 类 似 的 功能 还 是 很 寻常 的 。 接 下 来 ， 


让 我 们 再 对 之 前 的 示例 做 一 些 修改 ， 在 构建 继承 关系 的 过 程 中 引入 一 个 uber 
其 指向 其 父 级 原型 对 象 : 


function Shape(){} 
// augment prototype 
Shape.prototype.name = 'shape'; 
Shape .prototype.toString = function(){ 
Var const = this.constructor; 
return const.uber 
? this.const.uber.toString() + ', ' + this.name 
this .name; 


}; 


function TwoDShape(){} 

// take care of inheritance 
Var F = function(){}; 
F.prototype = Shape.prototype; 
TwoDShape .prototype = new F(); 


TwoDShape .prototype.constructor = TwoDShape; 
TwoDShape .uber = Shape.prototype; 
// augment prototype 


TwoDShape.prototype.name = '2D shape'; 


function Triangle (side, height) { 
this.side = side; 
this.height = height; 


// take care of inheritance 
Var F = function(){}; 
F.prototype = TwoDShape.prototype; 


洒 


rriangle.prototype = new F(); 
Triangle.prototype.constructor = Triangle; 
Triangle.uber = TwoDShape .prototype; 

// augment prototype 


5 


rriangle.prototype.name = 'Triangle'; 


3 


rriangle.prototype.getArea = function(){ 
return this.side * this.height / 2; 


在 这 里 ， 我 们 主要 新 增 了 以 下 内 容 : 


属性 


并 


今 
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9 ”将 uber 属性 设置 成 指向 其 父 级 原型 的 引用 。 

对 toString () 方 法 进行 了 更 新 。 

在 此 之 前 ，toString () 所 做 的 仅仅 是 返回 this .name 的 内 容 而 已 。 现 在 我 们 为 它 
新 增 了 一 项 额外 任务 ， 即 检查 对 象 中 是 否 存在 this .constructor.uber 属性 ， 如 果 存 
在 ， 就 先 调 用 该 属性 的 toString 方法 。 由 于 this.constructor 本 身 是 一 个 函数 ， 而 
this.constructor.uber 则 是 指向 当前 对 象 父 级 原型 的 引用 ， 所 以 当 我 们 调用 
Triangle 实体 的 toString () 方 法 时 ， 其 原型 链 上 所 有 的 toString () 都 会 被 调用 : 


> Var my = new Triangle (5, 10); 
> my.toString() ， 
"shape, 2D shape, Triangle" 


另外 ，uber 属性 的 名 字 原 本 应 该 是 “superclass”， 但 这 样 一 来 好 像 显 得 JavaScript 中 
有 了 类 的 概念 ， 或 许 应 该 叫做 “super”( 就 像 Java 那样 )， 但 super 一 词 在 JavaScript 中 属 
于 保留 字 。 因 而 ，Douglass Crockford 建议 采用 德语 中 与 “super” 同 义 的 词 “iiber”， 这 个 
主意 看 起 来 不 错 ， 挺 酷 的 。 


6.4 将 继承 部 分 封闭 成 函数 


下 面 ， 我 们 要 将 这 些 实现 继承 关系 的 代码 提炼 出 来 ， 并 迁 入 一 个 叫做 sxtend () 的 可 
重用 函数 中 ; 


function extend (Child, Parent) { 
Var F = function(){}; 
EF.prototype = Parent .prototype; 
Child.prototype = new F(); 
Child.prototype.constructor = Child; 
Child.uber = Parent.prototype; 


通过 应 用 上 面 的 函数 (读者 也 可 以 自行 再 定义 一 个 ), 我 们 既 可 以 使 代码 保持 简洁 ， 又 
能 将 其 重用 在 构建 继承 关系 的 任务 中 。 这 种 方式 让 我 们 能 通过 以 下 简单 的 调用 来 实现 继承 : 


extend (TwoDShape, Shape); 


以 及 : 
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extend (Triangle, TwoDShape); 


下 面 我 们 来 看 一 个 完整 的 例子 : 


// inheritance helper 
function extend (Child, Parent) { 
Yar E =: "FuUnction () {Fs 


F.prototype = Parent .prototype; 
Child.prototype = new F(); 
Child.prototype.constructor = Child; 
Child.uber = Parent.prototype; 


// define -> augment 
function Shape() {}; 


Shape.prototype.name = 'Shape'; 
Shape.prototype.toString = function () 
return this.constructor.uber 
2? this.constructor.uber.toString() 
this.name; 


}; 


// define -> inherit -> augment 
function TwoDShape() {}; 

extend (TwoDShape, Shape); 

TwoDShape .prototype .name = '2D shape'; 


// define 
function Triangle (side, height) { 
this.side = side; 

this.height = height; 

} 
// inherit 
extend (Triangle, TwoDShape); 
// augment 


rriangle.prototype.name = 'Triangle'; 


i 


rriangle.prototype.getArea = function 
return this.side * this.height / 2; 


}; 
测试 : 


> new Triangle().toString() ， 
"Shape, 2D shape, Triangle" 


从 


() 


{ 


.Name 
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6.5 属性 拷贝 


接 下 来 ， 让 我 们 尝试 一 个 与 之 前 略 有 不 同 的 方法 。 在 构建 可 重用 的 继承 代码 时 ， 我 们 
也 可 以 简单 地 将 父 对 象 的 属性 拷贝 给 子 对 象 ， 参 照 之 前 的 extend () 接口 ， 我 们 可 以 创建 
一 个 extend2 () 函数 ， 该 函数 也 接受 两 个 构造 器 函数 为 参数 ， 并 将 Parent 的 原型 的 所 
有 属性 全 部 拷贝 给 child 的 原型 , 其 中 包括 方法 , 因为 方法 本 身 也 是 一 种 函数 类 型 的 属性 。 


function extend2 (Child, Parent) { 
Var p = Parent .prototype; 
Var c = Child.prototype; 
fOr (Var yA 
c[i] = plil; 
} 
Cc.uber = p; 


} 


如 您 所 见 ， 我 们 通过 一 个 简单 的 循环 遍历 了 函数 所 接受 的 所 有 属性 。 在 之 前 的 示例 中 ， 
如 果子 对 象 需要 访问 父 对 象 的 方法 ， 我 们 可 以 通过 设置 uber 属性 来 实现 。 而 这 里 的 情况 
与 之 前 有 所 不 同 ， 由 于 我 们 已 经 完成 对 child 的 原型 进行 扩展 ， 不 需要 再 去 重 置 child. 
prototype.constructor 属性 ， 因 为 它 不 会 再 被 完全 履 盖 了 ， 因 此 在 这 里 
constructor 属性 所 指向 的 值 是 正确 的 。 


与 之 前 的 方法 相 比 ,， 这 个 方法 在 效率 上 上 略 进 一 筹 。 因为 这 里 执行 的 是 子 对 象 原型 的 逐一 撕 
贝 ， 而 非 简单 的 原型 链 查 询 。 所 以 我 们 必须 要 记 住 ， 这 种 方式 仅 适 用 于 只 包含 基本 数据 类 型 的 
对 象 ， 所 有 的 对 象 类 型 (包括 函数 与 数组 ) 都 是 不 可 复制 的 ， 因 为 它们 只 支持 引用 传递 。 

下 面 我 们 来 看 看 具体 的 应 用 示例 , 以 下 有 两 个 构造 器 函数 Shape () 和 TwoDShape () 。 


其 中 ，Shape () 的 原型 中 包含 了 一 个 基本 类 型 属性 name， 和 一 个 非 基 本 类 型 属性 一 一 
toString () 方 法 : 


Var Shape = function(){}; 
Var TwoDShape = function(){}; 
Shape.prototype.name = 'shape'; 


Shape.prototype.toString = function(){ 
return this.uber 
? this.uber.toString() + ', ' + this.name 
: thnis.name; 
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如 果 我 们 通过 extend ( ) 方法 来 实现 继承 ， 那 么 name 属性 既 不 会 是 TwoDShape () 实例 
的 属性 ， 也 不 会 成 为 其 原型 对 象 的 属性 ， 但 是 子 对 象 依然 可 以 通过 继承 方式 来 访问 该 属性 


人 


o 


> extend (TwoDShape, Shape); 
> Var td = new TwoDShape(); 
> td.name; 

"shape" 


> TwoDShape .prototype.name; 
mm shape wm 


> tdq. proto .name; 
"shape" 


> td.hasOwnProperty('name'); 
false 


> td. proto .hasOwnProperty('name'); 
false 


而 如 果 继 承 是 通过 exteng2 () 方法 来 实现 的 ，TwoDShape () 的 原型 中 就 会 拷贝 获得 
属于 自己 的 name 属性 。 同 样 的 ， 其 中 也 会 拷贝 属于 自己 的 toString () 方 法 ， 但 这 只 是 
一 个 函数 引用 ， 函 数 本 身 并 没有 被 再 次 创建 。 


> extend2 (TwoDShape, Shape); 
> Var td = new TwoDShape(); 
> td. proto .hasOwnProperty('name'); 
true 


> td. proto .hasOwnProperty('toString'); 


> td. proto .toString === Shape.prototype.toSstring; 
true 


如 您 所 见 ， 上 面 两 个 toString () 方法 实际 是 同一 个 函数 对 象 。 之 所 以 这 样 做 ， 也 是 
因为 这 样 的 方法 重建 其 实 是 完全 没有 必要 的 。 

所 以 , 之 所 以 说 extend2 () 方法 的 效率 要 低 于 extend () 方法 ， 主 要 是 前 者 对 部 分 原型 
属性 进行 了 重建 。 当 然 了 ， 这 对 于 只 包含 基本 数据 类 型 的 对 象 来 说 ， 未 必 真 的 就 如 此 糟糕 。 而 
， 这 样 做 还 能 使 属性 查找 操作 更 多 地 停留 在 对 象 本 身 ， 从 而 可 减少 原型 链 上 的 查找 。 
岗 在 ， 让 我 们 再 来 回顾 一 下 定义 uber 属性 的 整个 过 程 。 这 一 次 的 做 法 有 别 于 之 前 的 


HH 
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;~ 


Parent 构造 器 赋值 ， 这 里 我 们 是 将 Parent 的 prototype 属性 赋值 给 了 变量 p， 
过 p 来 完成 uber 赋值 的 。 之 所 以 要 故意 做 出 这 种 差异 化 实现 只 是 为 了 说 明 ， 您 可 以 
自己 的 需要 来 使 用 您 自己 认为 合适 的 继承 模式 。 让 我 们 来 测试 一 下 代码 : 


ei 


东 杞 各 
es 


> td.toSstring(); 
"Shape, Shape" 


TwoDShape 并 没有 重新 定义 name 属性 ， 所 以 在 这 里 打印 了 两 个 Shape。 您 可 以 在 
任何 时 候 重 新 定义 name 属性 ， 然 后 所 有 的 实例 都 会 立即 “看 见 ”name 属性 的 更 新 : 


> TwoDShape .prototype .name = "2D shape" 
td toOStELng(}s 
"Shape, 2D shape" 


6.6 ”请 小 心 处 理 引 用 拷贝 


事实 上 ， 对 象 类 型 (包括 函数 与 数组 ) 通常 都 是 以 引用 形式 来 进行 拷贝 的 ， 这 有 时 会 
导致 一 些 与 预期 不 同 的 结果 。 
下 面 ， 我 们 来 创建 两 个 构造 器 函数 ， 并 在 


TH 
四 
HF 


第 一 个 构造 器 的 原型 中 添加 一 


于 


> function Papa() {} 

> function Wee() {} 

> Papa.prototype.name = 'Bear'; 

> Papa.prototype.owns = ["porridge", "chair", "pbed"]; 


现在 ， 我 们 让 Wee 继承 Papa (通过 extend() 或 extengd2 () 来 实现 ): 


> extend2 (Wee, Papa); 


这 里 使 用 的 是 extend2 () ， 即 Wee 的 原型 继承 了 Papa 的 原型 属性 ， 并 将 其 变 
成 了 自身 属性 。 


> Wee.prototype.hasOwnProperty('name'); 
true 


> Wee.prototype.hasOwnProperty('owns'); 
true 


其 中 , name 属于 基本 类 型 属性 , 创建 的 是 一 份 全 新 的 拷贝 。 而 owns 属性 是 一 个 数组 
对 象 ， 它 所 执行 的 是 引用 拷贝 ; 
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> Wee.prototype.owns; 
["porridge", "chair", "bed"] 


> Wee.prototype.owns === Papa.prototype.owns; 
true 


如 果 改 变 wee 中 的 name 属性 ， 不 会 对 Papa 产生 影响 : 


> Wee.prototype.name += ', Little Bear'; 
"Bear, Little Bear" 


> Papa.prototype.name; 
mT Bear LA 


但 如 果 改 变 的 是 Wee 的 owns 属性 ，Papa 就 会 受到 影响 了 


中 引用 的 是 同一 个 数组 : 


> Wee.prototype.owns.pop(); 
"ped" 


> Papa.prototype.owns; 
["porridge", "chair"] 


当然 ， 如 果 我 们 用 另 一 个 对 象 对 Wee 的 owns 属性 进行 完全 重 写 ( 而 不 是 修改 现 有 属 


， 因 为 这 两 个 属性 在 内 存 


性 )， 事 情 就 完全 不 一 样 了 。 在 这 种 情况 下 ，Papa 的 owns 属性 会 继续 引用 原 有 对 象 ， 而 
Wee 的 owns 属性 则 指向 了 新 的 对 象 。 


物 


> Wee.prototype.owns = ["empty bowl", "broken chair"]; 


> Papa.prototype.owns.push('bed'); 
> Papa.prototype.owns; 
["porridge", "chair", "bed"] 


这 里 的 主要 思想 是 ， 当 某 些 东西 被 创建 为 一 个 对 象 时 ， 它 们 就 被 存储 在 内 存 中 的 某 个 


Wee .prototype.owns 时 ,就 相当 于 告诉 它 :“ 喂 ， 忘 了 那个 旧 
现在 这 个 新 对 象 上 来 ”。 
下 面 ， 我 们 可 以 通过 图 6-2 来 了 解 一 下 内 存 中 对 象 的 储存 情况 。 内 存 中 所 存储 的 对 象 


通常 会 整齐 排列 ， 看 上 去 就 像 一 面 用 砖头 堆 起 来 的 墙 。 而 我 们 的 变量 


理 位 置 ， 相 关 的 变量 和 属性 就 会 指向 这 些 位 置 。 而 当 我 们 将 一 个 新 对 象 赋值 给 


对 象 吧 ， 快 将 指针 转移 到 


象 的 指针 。 该 图 中 展示 出 了 以 下 几 种 情况 : 


则 是 一 些 指 向 这 些 对 


如 出 
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令 ”创建 一 个 新 对 象 ， 并 且 让 变量 A 指向 该 对 象 。 

令 ”创建 一 个 新 变量 B， 并 设置 其 与 A 相等 。 也 就 是 说 , 现在 B 和 A 指向 了 同一 个 对 
象 ， 也 就 是 内 存 中 的 同一 个 位 置 。 

仿 ” 修 改变 量 B 所 指 对 象 的 color 属性 ， 将 它 设置 为 "white"。 在 图 中 ， 对 应 的 砖 

就 形象 地 变 为 了 和 白色。 如果 现在 我 们 执行 检查 A.color === "white"， 就 会 

得 到 true。 


令 ”再 创建 一 个 新 对 象 ， 然后 让 变量 B 指向 这 个 新 对 象 。 这 样 一 来 , 由 于 A 和 了 B 指向 


了 内 存 中 的 不 同位 置 ， 所 以 它们 之 间 已 经 完全 没有 联系 ， 对 它们 之 中 任何 一 个 所 
做 的 更 改 都 不 会 影响 另 一 个 。 


B .code= ”white”; 


6-2 


如 果 您 想 解决 引用 拷贝 方法 无 法 解决 的 问题 ， 那 么 也 许 应 该 考虑 深度 拷贝 方法 。 对 此 
我 们 将 在 以 后 进行 讨论 。 
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6.7 ”对 和 象 之 间 的 继承 


到 目前 为 止 ， 本 章 所 有 的 示例 都 是 以 构造 器 创建 对 象 为 前 提 的 ， 并 且 ， 我 们 在 这 些 用 
于 创建 对 象 的 构造 器 中 引入 了 从 其 他 构造 器 中 继承 而 来 的 属性 。 但 实际 上 ， 我 们 也 可 以 丢 
开 构 造 器 ， 直 接 通过 对 象 标 识 法 来 创建 对 象 ， 并 且 这 样 做 还 能 减少 我 们 的 实际 输入 。 但是， 
它们 是 如 何 实现 继承 的 呢 ? 

在 Java 或 PHP 中 , 我 们 是 通过 类 定义 来 构建 不 同类 之 间 的 继承 关系 的 。 所 谓 传统 意义 
上 的 面向 对 象 是 依靠 类 来 完成 的 。 但 JavaScript 中 没有 类 的 概念 ， 因 此 ， 那 些 具有 传统 编 
程 背 景 的 程序 员 自 然而 然 地 会 将 构造 器 函数 当做 类 , 因为 两 者 在 使 用 方式 上 是 最 为 接近 的 。 
此 外 ，JavaScript 中 也 提供 了 new 操作 符 ， 这 使 得 JavaScript 与 Java 的 相似 程度 更 为 接近 。 
无 论 如 何 ， 所 有 的 一 切 最 终 都 要 回 到 对 象 层面 上 来 。 例 如 在 本 章 的 第 一 个 示例 中 ， 我 们 使 
的 语法 是 这 样 的 : 


de 


一 、 


Child.prototype = new Parent (); 


尽管 这 里 的 Child 构造 器 (您 也 可 以 将 其 视 为 类 ) 是 从 Parent 继承 而 来 的 , 但 对 和 象 
本 身 则 是 通过 new Parent () 调用 来 创建 的 。 这 就 是 为 什么 我 们 说 这 是 一 种 仿 矿 统 扩 乡 资 
烧 式 ， 它 尽管 很 像 传统 继承 ， 但 终究 不 是 (因为 这 里 不 存在 任何 类 的 调用 )。 

那么 ， 我 们 为 什么 不 能 拿 掉 这 个 中 间 人 “〈 即 构造 器 /类 )， 直 接 在 对 象 之 间 构 建 继承 关 
系 呢 ?在 extend2 () 方 法 中 ， 父 原型 对 象 的 属性 被 逐一 拷贝 给 了 子 原型 对 象 ， 而 这 两 个 
原型 本 质 上 也 都 是 对 象 。 接 下 来 ， 让 我 们 将 原型 和 构造 器 忘 了 ， 尝 试 在 对 象 之 间 进 行 直 接 
属性 拷贝 吧 。 

首先 ， 我 们 用 var o = {1} 语 句 创 建 一 个 没有 任何 私有 属性 的 “ 空 ”对 象 作 为 “画板 ”， 
然后 再 逐步 为 其 添加 属性 。 但 这 次 我 们 不 通过 this 来 实现 ， 而 是 直接 将 现 有 对 象 的 属性 
全 部 拷贝 过 来 。 例 如 在 下 面 的 实现 中 ， 函 数 将 接受 一 个 对 象 并 返回 它 的 副本 。 


function extendCopy (P) { 
Var c= {}; 
for (var i in p) { 
c[i] = p[lil; 
} 
c.uber = p; 
ES :CS 


} 


的 实际 应 


区 
ido 自 宛 3 


var shape { 
'S 


Godtring: 


name.: 


单纯 的 属性 全 拷贝 是 一 种 


function() 


我 们 需要 一 个 基本 对 象 : 


hape', 


{ 


return this.name; 


} 
}; 


接着 
函数 ， 该 函数 会 返回 


我 们 就 可 以 看 


的 功能 。 


Var twoDee 


twoDee.name 


twoDee.toString 
return this. 


}; 


据 这 个 旧 对 象 来 创建 一 
一 个 新 对 象 。 然 后 


extendCopy (shape); 


'2D shape'; 


function()f{ 
uber.toSstring() + " 


了 


E 常 简单 直接 的 模式 , 但 适用 范围 


外 
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很 广 。 下 面 来 看 看 extendCopy () 


新 的 对 象 了 ， 只 需 调 


xtendCopy () 


， 我 们 可 以 继续 对 这 个 新 对 象 进行 扩展 ， 添 加 额外 


"+ this.name; 


下 面 ， 我 们 让 triangle 对 象 继承 一 个 2D 图 形 对 象 : 


var triangle 


triangle.name 


triangle.getArea 


extendCopy (twoDee); 


'Triangle'; 


function() 


return this.side * this.height / 2; 


}; 


> triangle. 
> triangle. 
> triangle. 
25 


> triangle. 
"shape, 2D 


side 
height 
getArea(); 


使 用 该 triangle: 


57 


10; 


tOStELNgG() 
shape, Triangle" 


对 于 这 


方法 而 言 ,可 能 的 问题 就 在 于 初始 化 一 个 新 triangle 对 象 的 过 程 过 于 繁琐 。 


因为 我 们 必须 要 对 该 对 象 的 sidqe 和 height 值 进行 手动 设置 ， 这 与 之 前 直接 将 相关 的 值 
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作为 参数 传递 给 构造 器 函数 是 不 一 样 的 。 但 这 方面 的 问题 只 需要 调用 一 个 函数 就 能 轻易 解 


决 ， 例 如 与 构造 器 函数 类 似 的 init () 方 法 (如 果 您 使 用 PHP5， 可 调用 construct() 


函数 )， 我 们 只 需要 在 调用 时 将 这 两 个 值 以 参数 形式 传递 给 它 即 可 。 又 或 者 ， 我 们 可 以 将 


extenqCopy () 函数 设计 为 接收 两 个 参数 : 第 一 个 参数 不 变 ， 第 二 个 参数 是 包含 我 们 需要 


的 额外 属性 的 对 象 ， 然 后 我 们 就 可 以 在 函数 体 中 ， 使 用 这 些 额 外 属性 对 所 返回 的 拷贝 进行 
扩展 ， 或 者 换 一 种 说 法 ， 将 第 一 个 参数 的 找 贝 与 第 二 个 参数 合并 。 


6.8 深 拷贝 


在 之 前 的 讨论 中 ，extendCopy () 函数 以 及 再 之 前 的 extend2 () 函数 所 用 的 创建 方 


式 叫 做 浅 揽 贝 (shallow copy)。 与 之 相对 的 ， 当 然 就 


it 是 所 谓 的 深 拷贝 (deep copy) 了 。 经 


过 之 前 章节 ( 即 6.6) 的 讨论 ， 我 们 已 经 知道 当 对 象 被 拷贝 时 ， 实 际 上 拷贝 的 只 是 该 对 象 在 
内 存 中 的 位 置 指针 。 这 一 过 程 就 是 所 谓 的 浅 拷贝 ， 在 这 种 情况 下 ， 如 果 我 们 修改 了 拷贝 对 
象 ， 就 等 同 于 修改 了 原 对 象 。 而 深 找 贝 则 可 以 帮助 我 们 避免 这 方面 的 问题 。 


深 找 贝 的 实现 方式 与 浅 拷贝 基本 相同 ， 也 需要 通过 
只 是 在 遇 到 一 个 对 象 引 用 性 的 属性 时 ， 我 们 需要 再 次 对 其 调用 深 拷贝 函数 : 


function deepCopy (P，c) 
& 二 
fo (are TB) 1 
if (p.hasOwnProperty(i)) { 
if (typeof pl[i] === 'object') { 
c[i] = Array.isArray(p[i]) ? [] : 
deepCopy (pli], cl{[il]); 
} else { 
Cts BLL); 
} 
} 
} 
return c; 


} 


洲 


历 对 象 的 属性 来 进行 拷贝 操作 。 


{}; 


现在 我 们 来 创建 一 个 对 象 ， 该 对 象 包含 数组 和 子 对 象 : 


Var parent = { 
numbers: [1, 2, 3], 
letters: Day br Vehy 
OBys 4 


}; 


下 
拷贝 对 
必 


> 
6 


> 


[1, 


[1, 


> 
4 


> 


[1, 


> 


[1, 


2 


[1, 
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DEOB::, 1 
}, 


bool: true 


面 ， 我 们 分 别 用 深 拷贝 和 浅 找 贝 测试 一 下 ， 就 会 发 现 两 者 的 不 同 。 在 深 拷贝 中 ， 对 


象 的 numbers 属性 进行 更 新 不 会 对 原 对 象 产生 影响 


Var mydeep = deepCopy (parent); 
var myshallow = extendCopy (parent); 
mydeep.numbers.push (4,5,6); 


mydeep.numbers; 
2, 3, 4, 5, 6€] 


parent.numbers; 
2，3] 
myshallow.numbers.push (10); 


myshallow.numbers; 
2, 3, 10] 
parent.numbers; 

2, 3, 10]; 
mydeep.numbers; 

2 3547 5,"6] 


使 用 dqeepCopy () 函数 要 注意 两 点 。 


令 ”在 拷贝 每 个 属性 之 前 ， 建 议 使 用 hasownProperty () 来 确认 不 会 误 找 贝 不 需要 
的 继承 属性 。 

争 ”由 于 区 分 Array 对 象 和 普通 object 对 象 相 当 繁 琐 ， 所 以 ES5 标准 中 实现 了 
Array.isArray() 函数 。 这 个 跨 浏 览 器 的 最 佳 解决 方案 ( 换 句 话说 ， 为 仅 支 持 
ES3 的 环境 提供 isArray () 函数 ) 虽然 看 起 来 有 点 取 巧 ， 但 却 是 有 效 的 。 

if (Array.isArray !== "function") { 

Array.isArray = function (candidate) { 


return 
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Object.prototype.toString.call (candidate) === ' [object Array]'; 
}; 
} 


6.9 object() 


基于 这 种 在 对 象 之 间 直 接 构 建 继承 关系 的 理念 ，Douglas Crockford 为 我 们 提出 了 一 个 
建议 ， 即 可 以 用 object () 函数 来 接收 父 对 象 ， 并 返回 一 个 以 该 对 象 为 原型 的 新 对 象 。 


加 | 


function object (o) { 
function F() {} 
F.prototype = o; 
return new F(); 


} 


如 果 我 们 需要 访问 uber 属性 ， 可 以 继续 object () 函数 ， 具 体 如 下 : 


function object(o) { 
Var n; 
function F() {} 
F.prototype = o; 
n= new F(); 
n.uber = O); 
FEtUILN DN: 


} 


这 个 函数 的 使 用 与 extendCopy () 基本 相同 : 我 们 只 需要 将 某 个 对 象 ( 例 如 twoDee) 
传递 给 它 ， 并 由 此 创建 一 个 新 对 象 。 然 后 再 对 新 对 象 进 行 后 续 的 扩展 处 理 。 


Var triangle = object (twoDee); 
triangle.name = Triangle" 
triangle.getArea = function(){ 


return this.side * this.height / 2; 
}; 


新 triangle 对 象 的 行为 依然 不 变 : 


> triangle.toString () 
"shape, 2D shape, Triangle" 


这 种 模式 也 被 称 为 原型 继承 ， 因 为 在 这 里 ， 我 们 将 父 对 象 设置 成 了 子 对 象 的 原型 。 这 


函数 被 ES5 所 采纳 ， 


个 object 1() 


> Var square = Object.creat 


并 且 更 名 为 Object .create () 
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。 例 如 : 


(triangle); 


6.10 ”原型 继承 与 属性 拷贝 的 混合 应 用 


对 于 继承 来 说 ， 主 要 目标 就 是 将 


些 现 有 的 功能 归 为 己 有 。 也 就 是 说 ， 我 们 在 新 建 一 


个 对 象 时 ， 通 常 首先 应 该 继承 于 现 有 对 象 ， 然 后 再 为 其 添加 额外 的 方法 与 属性 。 对 此 ， 我 
们 可 以 通过 一 个 函数 调用 来 完成 ， 并 且 在 其 中 混合 使 用 我 们 刚才 所 讨论 的 两 种 方式 。 
【 体 而 言 就 是 : 
令 使 用 原型 继承 的 方式 ， 将 一 个 已 有 对 象 设置 为 新 对 象 的 原型 。 
9 ， 新建 一 个 对 象 后 ， 将 另 一 个 已 有 对 象 的 所 有 属性 拷贝 过 来 。 
function objectPlus(o, stuff) 
Var n; 
function F() {} 
F.prototype = o; 
n= new F(); 
n.uber = o; 
for (var i in stuff) { 
n[i] = stuff[i]; 
} 
return n; 
} 
这 个 函数 接受 两 个 参数 ,其 中 对 象 o 用 于 继承 , 而 男 一 个 对 象 stuff 则 用 于 拷贝 方法 
与 属性 。 下 面 我 们 来 看 看 实际 应 用 。 
首先 ， 需 要 一 个 基本 对 象 shape: 
Var Shape = { 
name: 'shape', 
tootrineg: Eunctiorn(), A{ 
return this.name; 
} 
}; 
接着 再 创建 一 个 继承 于 shape 的 2D 对 象 ， 并 为 其 添加 更 多 的 属性 。 这 些 额 外 的 属性 
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日 一 个 用 文本 标识 法 所 创建 的 匿名 对 象 提供 。 


Var twoDee = objectPlus (shape, { 


uml 


name: '2D shape', 
tostring: function()f{ 
return this.uber.toString() + ', ' + this.name; 
} 
}); 


现在 ， 我 们 来 创建 一 个 继承 于 2D 对 象 的 triangle 对 象 ， 并 为 其 添加 一 些 额 外 的 属 怕 


pel 


上 


Var triangle = objectPlus (twoDee, { 
name: 'Triangle', 
getArea: function()f{ 
return this.side * this.height / 2; 
}, 
side: 0, 
height: 0 
}); 


下 面 我 们 来 测试 一 下 : 创建 一 个 具体 的 triangle 对 象 my， 并 自 定 义 其 side 和 
height 属性 。 


> var my = objectPlus (triangle, { 
side: 4, heighnt: 4 
}); 
> my.getArea (); 
8 


> my.toSstring(); 
"shape, 2D shape, Triangle, Triangle" 


这 里 的 不 同 之 处 在 于 ， 当 toString () 函数 被 执行 时 ，Triangle 的 name 属性 会 被 
重复 两 次 。 这 是 因为 我 们 在 具 现 化 实例 时 是 继承 于 triangle 对 象 的 ， 所 以 这 里 多 了 一 层 
继承 关系 。 我 们 也 可 以 给 该 实例 一 个 新 的 name 属性 。 例 如 : 


> objectPlus (triangle, { 
side: 4， 
height: 4, 
name: 'My 4x4"' 
}) .toString (); 
"Shape, 2D shape, Triangle, My 4x4" 
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这 里 的 opjectPlus () 函数 的 实现 方式 比 起 之 前 提 到 的 object () 更 接近 ES5 的 
Object. create () 。 只 是 ES5 的 实现 中 ， 附 加 属性 〈 也 就 是 第 二 个 参数 ) 是 通过 属性 描 
述 符 提供 的 〈 见 胡 灵 C， 旋 琵 秒 毗 )。 


6.11 多 重 继承 


所 谓 的 多 重 继承 ， 通 常 指 的 是 一 个 子 对 象 中 有 不 止 一 个 父 对 象 的 继承 模式 。 对 于 这 种 
模式 ， 有 些 面 向 对 象 程序 语言 支持 ， 有 些 则 不 支持 。 我 们 可 以 对 它们 进行 一 些 杜 别 ， 自 行 
判断 在 复杂 的 应 用 程序 设计 中 多 重 继承 是 否 能 带 来 方便 ， 或 者 是 否 有 这 种 必要 使 用 它 ， 以 
及 它 是 否 会 比 原型 链 的 方式 更 好 。 但 无 论 如 何 ， 对 于 JavaScript 这 样 的 动态 语言 来 说 ， 实 
现 多 重 继承 是 很 简单 的 ， 尽 管 语言 本 身 没有 为 此 提供 特殊 的 语法 单元 。 现 在 ， 让 我 们 和 暂 
先 离开 一 下 这 个 讨论 多 重 继承 利 次 的 漫漫 长 夜 ， 去 实现 中 感受 一 下 多 重 继承 的 用 法 吧 。 

多 重 继承 实现 是 极其 简单 的 ， 我 们 只 需要 延续 属性 拷贝 法 的 继承 思路 依次 扩展 对 象 妈 
可 ， 而 对 参数 中 所 继承 的 对 象 的 数量 没有 限制 。 

下 面 ， 我 们 来 创建 一 个 multi () 函数 ， 它 可 以 接受 任意 数量 的 输入 性 对 象 。 然 后 ,我 
们 在 其 中 实现 了 一 个 双重 循环 ， 内 层 循环 用 于 拷贝 属性 ， 而 外 层 循环 则 用 于 遍历 函数 参数 
中 所 传递 进来 的 所 有 对 象 。 


function multi() { 


上 由 


var n = {}, stuff, j = 0, len = arguments.length; 
for (] = 0; j < len; j++) { 


stuff = arguments{[j]; 
for (var i in stuff) { 
if(stuff has Own Property(1) ){ 
n[il = stuff[i]; 
} 
} 
return n; 


} 


现在 来 测试 一 下 : 首先 ， 我 们 需要 创建 shape、twoDee 以 及 一 个 匿名 对 象 。 然 后 调 
multi () 函数 ， 将 这 三 个 对 象 作 为 参数 传递 ， 该 函数 会 返回 新 建 的 triangle 对 象 。 


var shape = { 


name: 'shape', 


tostring: function() { 
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return this.name; 
} 
}; 


Var twoDee = { 
name: '2D shape', 
dimensions: 2 


}; 


var triangle = multi(shape, twoDee, { 
name: 'Triangle', 
getArea: function()f{ 
return this.side * this.height / 2; 
} ， 
side: 5, 
height: 10 
}); 


然后 , 让 我 们 来 看 看 它 是 否 可 以 工作 。getArea () 方 法 应 该 是 独 有 属性 , dimensions 
则 应 该 是 自 twoDee 而 来 的 继承 属性 ，toString () 则 是 从 shape 继承 而 来 的 : 


> triangle.getArea (); 
25 


> triangle.dimensions; 
2 


> triangle.toString(); 
"Triangle" 


要 注意 的 是 ，multi () 中 的 循环 是 按照 对 象 的 输入 顺序 来 进行 遍历 的 。 如 果 其 中 两 个 
对 象 拥有 相同 的 属性 ， 前 一 个 就 会 被 后 一 个 履 盖 。 


混合 插 人 


在 这 里 ， 我 们 需要 了 解 一 种 叫做 混合 插入 (mixins) 的 技术 。 我 们 可 以 将 其 看 做 一 
为 对 象 提 供 某 些 实 用 功能 的 技术 ， 只 不 过 ， 它 并 不 是 通过 子 对 象 的 继承 与 扩展 来 完成 的 。 
我 们 之 前 所 讨论 的 多 重 继承 实际 上 正 是 基于 这 种 技术 理念 来 实现 的 。 也 就 是 说 ， 每 当 我 
们 新 建 一 个 对 象 时 ， 可 以 选择 将 其 他 对 象 的 内 容 混合 到 我 们 的 新 对 象 中 去 ， 只 要 将 它们 
全 部 传递 给 multi () 函数 ， 我 们 就 可 以 在 不 建立 相关 继承 关系 树 的 情况 下 获得 这 些 对 象 
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的 功能 。 


6.12 ”寄生 式 继 承 


JavaScript 中 能 够 实现 继承 的 方式 有 很 多 。 如 果 您 渴望 多 了 解 一 些 这 方面 的 知识 ,这 里 


可 以 再 为 您 介绍 一 种 叫做 寄生 式 继承 的 模式 。 这 是 由 Douglas Crockford 所 提出 的 技术 ， 基 
思路 是 ， 我 们 可 以 在 创建 对 象 的 函数 中 直接 吸收 其 他 对 象 的 功能 ， 然 后 对 其 进行 扩展 并 


返回 。“ 就 好 像 所 有 的 工作 都 是 自己 做 的 一 样 ”。 
能 性 : 
var twoD = { 
name: '2D shape', 


dimensions: 2 


}; 


然后 我 们 来 编写 用 于 创建 


下 面 ， 我 们 用 对 象 标识 法 定义 了 一 个 普通 对 象 ， 这 时 它 还 看 不 出 有 任何 被 寄生 的 可 


triangle 对 象 的 函数 。 


多 ”将 twoD 对 象 克 隆 进 一 个 叫做 that 的 对 象 ， 这 一 步 可 以 使 用 我 们 之 前 所 讨论 过 
的 任何 方法 ， 例 如 使 用 object () 函数 或 者 执行 全 属性 拷贝 。 


令 扩展 that 对 象 ， 添 加 更 多 的 属性 。 


| 


令 返回 that 对 象 。 


function triangle(s, nh) { 
Var that = object (twoD); 
that.name ='Triangle'; 


that.getArea = function()f{ 


return this.side * 
}; 
that.side = s; 
that.height = h; 
return that; 


} 


this.height / 2; 


由 于 triangle () 只 是 个 一 般 函 数 ， 不 属于 构造 器 ， 所 以 调用 它 通 常 是 不 需要 new 


操作 符 的 。 但 由 于 该 函数 返回 


的 是 一 个 对 象 ， 所 以 即便 我 们 在 函数 调用 时 错误 地 使 用 了 


new 操作 符 ， 它 也 会 按照 预定 


的 方式 工作 。 
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> Var t = triangle(5, 10); 
> t.dimensions 


2 

> Var t2 = new triangle (5,5); 
> t2.getArea(); 

12.5 


注意 ， 这 里 的 that 只 是 一 个 名 字 ， 并 不 存在 与 保留 字 this 用 法 类 似 的 特殊 含义 。 


6.13 构造 器 借用 


我 们 再 来 看 一 种 继承 实现 〈 这 是 本 章 最 后 一 个 了 ， 我 保证 )。 这 需要 再 次 从 构造 器 函数 
入 手 ， 这 回 不 直接 使 用 对 象 了 。 由 于 在 这 种 继承 模式 中 ， 子 对 象 构造 器 可 以 通过 call () 
或 apply () 方法 来 调用 父 对 象 的 构造 器 ， 因 而 ， 它 通常 被 称 为 构造 器 盗用 法 (stealing a 
constructor)， 或 者 构造 器 借用 法 (borrowing a constructor)， 如 果 您 想 更 含蓄 一 点 的 话 。 

尽管 call () 和 apply () 这 两 个 方法 在 血 4 蔓 : 形象 中 均 已 经 讨论 过 ,但 这 里 我 们 要 
更 进一步 。 正 如 您 所 知 ， 这 两 个 方法 都 允许 我 们 将 某 个 指定 对 象 的 this 值 与 一 个 函数 的 
调用 绑 定 起 来 。 这 对 于 继承 而 言 ， 就 意味 着 子 对 象 的 构造 器 在 调用 父 对 象 构造 器 时 ， 也 可 
以 将 子 对 象 中 新 建 的 this 对 象 与 父 对 象 的 this 值 绑 定 起 来 。 

下 面 ， 我 们 来 构建 一 个 父 类 构造 器 Shape () : 


function Shape(id) { 
this.id = id; 
} 
Shape.prototype.name = 'shape'; 
Shape.prototype.toString = function(){ 
return this.name; 


}; 


现在 我 们 来 定义 Triangle () 构造 器 ， 在 其 中 通过 apply () 方法 来 调用 Shape () 构造 
器 ， 并 将 相关 的 this 值 ( 即 new Triangle () 所 创建 的 示例 ) 和 其 他 一 些 参数 传递 该 方法 。 


function Triangle() { 


Shape.apply (this, arguments); 
} 


Triangle.prototype.name = 'Triangle'; 


注意 ， 这 里 无 论 是 Triangle () 还 是 shape () 都 在 其 各 自 的 原型 中 添加 些 额 外 的 


FL 


型 中 


Shape () 创建 任 


最 初 


构造 


获得 


发 生 
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下 面 ， 我 们 来 测试 一 下 ， 先 新 建 一 个 triangle 对 象 : 


> var t = new Triangle(101) ， 


> t.name; 
"Triangle" 


在 这 里 ， 新 的 triangle 对 象 继承 了 其 父 对 象 的 id 属 


的 其 他 任何 东西 : 


> 
101; 


的 
" [object Object]" 


生 ， 但 它 并 没有 继承 父 对 象 原 


如 
一 


之 所 以 triangle 对 象 中 不 包含 Shape 的 原型 属性 ， 是 因为 我 们 从 来 没有 调用 new 


可 一 个 实例 ， 自 然 其 原型 也 从 来 没有 被 用 到 。 这 很 容易 做 到 ， 例 如 在 本 章 


的 那个 示例 中 ， 我 们 可 以 对 Triangle () 构造 器 进行 如 下 重 定义 ; 


function Triangle() { 


Shape.apply (this, arguments); 


} 


Triangle.prototype.name = 


Triangle.prototype = new Shape(); 
'Triangle'; 


在 这 种 继承 模式 中 ， 父 对 象 的 属性 是 以 子 对 象 自 身 属性 的 身份 来 重建 的 。 这 也 体现 了 


器 借用 法 的 一 大 优势 : 当 我 们 创建 一 个 继承 于 数组 或 者 其 他 对 象 类 型 的 子 对 象 时 ， 将 


一 个 完 完 全 全 的 新 值 (不 是 一 个 引 朋 


但 这 种 模式 也 是 有 缺点 的 ， 


在 通过 apply () 方法 继承 其 自身 属 ! 
原型 时 。 这 样 一 来 ， 父 对 象 的 自身 属 怕 
演示 : 


function Shape(id) { 
this.id = id; 
} 


function Triangle() { 


目 )， 对 它 做 任何 修改 都 不 会 影响 其 父 对 象 。 


因为 这 


1! 性 


Shape.apply (this, arguments); 


生 时 ， 而 另 一 次 则 发 生 在 通过 new 操作 符 继承 
:事实 上 被 继承 了 两 次 。 下 面 让 我 们 来 做 一 个 简单 的 


4 况 下 父 对 象 的 构造 器 往往 会 被 调用 两 次 : 一 次 
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} 
Triangle.prototype = new Shape (101); 


然后 我 们 新 建 一 个 实例 : 


> Var t = new Triangle(202) ， 
> td 
202 


如 您 所 见 ， 对象 中 有 一 个 自身 属性 id, 但 它 并 非 来 自 原型 链 中 ,我 们 可 以 执行 如 下 验证 : 


St DEOLOT wd; 
101 


> delete t.id; 
true 


> td? 
101 


借用 构造 占 与 原型 复制 


对 于 这 种 由 于 构造 器 的 双重 调用 而 带 来 的 重复 执行 问题 , 实际 上 是 很 容易 更 正 的 。 我 们 可 
以 在 父 对 象 构 造 器 上 调用 apply () 方法 ， 以 获得 其 全 部 的 自身 属性 ， 然 后 再 用 一 个 简单 的 迁 
代 器 对 其 原型 属性 执行 逐 项 拷贝 (这 也 可 以 使 用 之 前 讨论 的 extenqg2 () 方法 来 完成 )。 例 如 : 


function Shape(id) { 
this.id = id; 


} 
Shape.prototype.name = 'Shape'; 


Shape.prototype.toString = function(){ 
return this.name; 


}; 


function Triangle() { 
Shape.apply (this, arguments); 

} 

extend2 (Triangle, Shape); 

Triangle.prototype.name = 'Triangle'; 

下 面 测 试 一 下 : 

> var 七 = new Triangle(101); 

ttodtetng() 

"Triangle" 


6.1 


们 大 


> 
101 


这 样 一 来 ， 双 重 继 承 就 不 见 了 : 


> typeof t. proto .id; 
"undefined" 


如 果 必 要 的 话 ，extend2 () 还 可 以 访问 对 象 的 uber 属性 : 


> t.uber.name; 
"Shape" 


4 ”本 章 小 结 


在 本 章 ， 我 们 学 习 了 一 系列 用 于 实现 继承 的 方法 (模式 )。 表 6-1 罗列 了 这 些 方法 。 


致 上 可 以 分 为 两 类 。 

令 。 基于 构造 器 工作 的 模式 。 

”基于 对 象 工 作 的 模式 。 

此 外 ， 我 们 也 可 以 基于 以 下 条 件 对 这 些 模式 进行 分 类 。 
令 是 否 使 用 原型 。 

令 是 否 执行 属性 拷贝 。 


第 6 章 继承 203 


Ct 


令 ”两 者 都 有 〈 即 执行 原型 属性 找 贝 )。 
表 6-1 
ds 代码 示例 所 属 模 式 技术 注 角 
马 趟 辐 注解 
编号 | 名 称 区 1 
。 基 于 构造 器 |。 默认 继承 机 向 
原型 链 人 。 RN 我 们 可 以 将 方法 与 
|， 。 使 用 原型 链 | 属性 集中 可 重用 的 部 分 迁移 
1 法 ( 仿 IChild.prototype = new Parent () ， i 
模式 到 原型 链 中 ， 而 将 不 可 重用 
传统 ) PP 
的 那 部 分 设置 为 对 象 的 自身 
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续 表 
方法 | 方法 、 
代码 示例 所 属 模式 技术 注解 
号 | 名 称 
。 基于 构造 器 j。 由 于 该 模式 在 构建 继承 关 
工作 的 模式 系 时 不 需要 新 建 对 象 实例 ， 
仅 从 原 。 原型 拷贝 模 | 效 率 上 会 有 较 好 的 表现 
Child.prototype = Parent. , 
2 型 继 式 (不 存在 原型 |。 原型 链 上 的 查询 也 会 比较 
prototype; ga . 
承 法 链 , 所 有 的 对 象 | 快 ， 因 为 这 里 根本 不 存在 链 
共享 一 个 原型 le 缺点 在 于 ， 对 子 对 象 的 修 
对 象 ) 改 会 影响 其 父 对 象 
function extend(Child，Parent) { je。 基于 构造 器 je。 此 模式 不 同 于 1 号 方法 ， 
var F = function(){}; 工作 的 模式 它 只 继承 父 对 象 的 原型 属 
F.prototype = Parent . e 使 用 原型 链 | 性 ， 而 对 于 其 自身 属性 〈 也 
临时 构 prototype; 模式 就 是 被 构造 器 添加 到 this 
3 Child.prototype = new F(); 值 中 的 属性 ) 则 不 予 继承 
造 器 法 
人 Child.prototype.constructor = 。 另外 ， 该 模式 还 为 我 们 访 
child; 问 父 对 象 提供 了 便利 的 方式 
Child.uber = Parent .prototype; ( 即 通 过 uper 属性 ) 
} 
function extend2 (Child, Parent) {le 基于 构造 器 je。 将 父 对 象 原型 中 的 内 容 全 
var ps Parent. protolype 工作 模式 部 转换 成 子 对 象 原型 属性 
| 屋 = Child. tet ? 
ee 。 找 贝 属性 。 |。 无须 为 继承 单独 创建 对 象 
性 找 for (var i In p) { 由 | 
和 c[i] = plil; 模式 实例 
中 法 |) 。 使 用 原型 。 |。 原型 链 木 身 也 更 短 
c.uber = p; 模式 
} 
function extendCopy(p) { 。 基于 对 象 工 |。 非常 简单 
oe 作 模式 。 没有 使 用 原型 属性 
全 属性 fOr (var i En DB) :1 生 毛 册 
。 | 拷贝 法 cli] = pli]; 。 属 性 拷贝 
( 即 浅 | 1 人 
.ub = p; 
拷贝 法 )| 一 
return c; 
} 
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续 表 
方法 | 方法 Ce 、 ce 
a 代码 示例 所 属 模 式 技术 注解 
号 | 名 称 
。 基于 对 象 工 | 与 方法 5 基本 相同 ， 但 所 有 
HH 4 生 了 摧 江 FE 旦 . 3 
。 | 深 持 | 同上 ,只 需 在 地 到 对 象 关 型 时 重复 调用 上 述 | 作 借 开 2 
贝 法 | 函数 即 可 人 
模式 
function object(o) { e 基于 对 象 工 |。 于 开 仿 类 机 制 ， 直 接 在 对 
原型 继 function F() {} 作 模 式 象 之 间 构 建 继承 关系 
7 ey F.prototype = o; 。 使 用 原型 链 |。 发 挥 原 型 回 有 优势 
承 法 加 
return new F(); 模式 
} 
function objectPlus(o，stuff) {je 基于 对 象 工 |e 该 方法 实际 上 是 原型 继承 
Var n; 作 模 式 法 (方法 7) 和 属性 拷贝 法 
functiorn. E() :{( e 使 用 原型 链 (方法 5) 的 混合 应 
F.prototype = oo; 有 :了 A 个 环 间 次 性 守 
扩展 与 ey F(); 模式 bd 它 通过 个 函数 次 性 完 
| | 。 属 性 拷贝 | 成 对 象 的 继承 与 扩展 
模式 for (var i in stuff) { 模式 
n[i] = stuff[i]; 
} 
retUTEN. Ni 
} 
function multi() { e 基于 对 象 工 |。 一 种 混合 插入 式 (mixin- 
var n= {}, stuff,; 了 了 = 07 作 模 式 style) 继承 实现 
De 。 属 性 拷贝 ”|。 它 会 按照 父 对 象 的 出 现 
二 (] = 0; ] 1 rl 7 j 二 让 { y 7 2 一 层 外 
人 Ce 模式 顺序 依次 对 它们 执行 属性 
Sy stuff = arguments[j]; 
多 重 继 i 全 拷贝 
9 Or (Va -Ln tuEE) “{ Es 
承 法 ] 


n[i] = stuff[i]; 


} 


return n; 
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续 表 
方法 | 方法 er ye 
a 代码 示例 所 属 模 式 技术 注解 
号 | 名 称 
function parasite(victim) { e 基于 对 象 工 |e 该 方法 通过 一 个 类 似 构 造 
var that = object (victim); 作 模 式 器 的 函数 来 创建 对 象 
寄生 继 
10 了 that.more = 1; 。 使 用 原型 链 |。 该 函数 会 执行 相应 的 对 象 
长 
”| return that; 模式 拷贝 ， 并 对 其 进行 扩展 ， 然 
} 后 返回 该 拷贝 
基于 构造 器 工 |。 该 方法 可 以 只 继承 父 对 象 
作 模 式 的 自身 属性 
， e 可 以 与 方法 1 结合 使 用 ， 
function Child() { 
构造 器 以 便 从 原型 中 继承 相关 内 容 
11 Parent.apply (this, arguments); 


萌 用 法 。 它 便于 我 们 的 子 对 象 继承 
某 个 对 象 的 县 体 属性 (并 且 
用 类 属性 ) 时 ， 


选择 最 简单 的 处 理 方式 


[ex 
全 
号 
3 
CC 
FU 
<IU 


。 使 用 构造 器 j。 该 方法 是 方法 11 与 方法 4 
工作 模式 的 结合 体 


构造 器 |function Child() { 


普 用 与 Parent.apply (this, arguments); | 
| 。 使 用 原型 链 |。 它 允许 我 们 在 不 重复 调用 
时 年 


四 法 lextend2 (Child, Parent); 


模式 父 对 象 构造 器 的 情况 下 同时 
。 属性 拷贝 模式 | 继承 其 自身 属性 和 原型 属性 


面 对 这 么 多 方法 ， 我 们 应 该 如 何 做 出 正确 的 选择 呢 ? 事实 上 这 取 诀 于 我 们 的 设计 风 
格 、 性 能 需求 、 具 体 项 目 任 务 及 团队 。 例 如 ， 您 是 否 更 习惯 于 从 类 的 角度 来 解决 问题 ? 习 
么 基于 构造 器 工作 模式 更 适合 您 。 或 者 您 可 能 只 关心 该 “类 ”的 菜 些 具体 实例 ， 那 么 可 外 
使 用 基于 对 象 的 模式 更 合适 。 

那么 ， 继 承 实 现 是 否 只 有 这 些 呢 ? 当然 不 是 ， 我 们 可 以 从 上 面 的 表 中 选择 任何 一 种 模 
式 ， 也 可 以 混合 使 用 它们 ， 甚 至 我 们 也 可 以 写 出 我 们 自己 的 方法 。 重 点 在 于 必须 理解 并 熟 
悉 这 些 对 象 、 原 型 以 及 构造 器 的 工作 方式 ， 剩 下 的 就 简单 了 。 


6.15 ”案例 学 习 : 图 形 绘制 


下 面 ， 让 我 们 用 一 个 更 为 具体 的 继承 应 用 示例 来 作为 本 章 的 结尾 吧 。 示 例 的 任务 是 计 


| 由 
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算 各 种 不 同 图 形 的 面积 和 边界 ， 然 后 将 它们 绘制 出 来 。 并 且 ， 要 求 在 这 过 程 中 尽 可 能 地 实 
现代 码 重 用 。 


6.15.1 分析 


首先 ， 我 们 要 将 所 有 对 象 的 公共 部 分 定义 成 一 个 构造 器 ， 即 Shape。 然 后 我 们 基于 这 
个 构造 器 分 别 构建 我 们 的 Triangle、Rectangle 和 Square 构造 器 ， 它 们 将 全 部 继承 
于 Shape。 其 中 ，Sdquare 实际 上 可 以 被 当做 一 个 长 宽度 相等 的 Rectangle， 因 此 当 我 
们 构建 Square 时 可 以 直接 重用 Rectangle。 


下 面 ， 我 们 来 定义 Shape 对 象 ， 首 先 ， 我 们 要 定义 一 个 带 x、y 坐标 的 point 对 象 。 
图 形 一 般 都 是 由 若干 个 Point 组 成 的 。 例 如 ， 定 义 一 个 Triangle 对 象 需要 三 个 point 
对 象 ， 而 定义 一 个 Rectangle 对 象 (为 了 让 题目 尽 可 能 简单 ) 需要 定义 一 个 point 对 象 
和 其 长 宽度 。 图 形 的 周 长 一 般 是 其 各 边 长 度 的 综合 ， 而 计算 一 个 图 形 的 面积 的 公式 则 随 图 
不 同 有 较 大 差异 ， 应 该 由 这 些 图 形 自己 来 实现 。 


这 样 一 来 ，Shape 体系 中 的 共有 属性 主要 包括 : 


令 一 个 能 根据 给 定 的 point 绘制 出 图 形 的 draw () 方法。 
2 一 个 
4 


getParameter () 方 法 。 


一 个 用 于 存储 Point 对 象 的 数组 忆 
令 ” 其 他 必须 的 属性 与 方法 。 


el 
请 


关于 绘制 部 分 ， 我 们 还 将 用 到 <canvas> 标 签 。 尽 管 早期 的 正 并 不 支持 这 一 特性 ， 


Ex 


丁 


当然 ， 还 有 两 个 辅助 构造 器 不 能 不 提 一 一 Point 和 Line。 其 中 ，Point 用 于 定义 图 
攻 ， 而 Line 则 用 于 计算 给 定 两 个 点 之 间 的 距离 。 


读者 也 可 以 到 http://www.phpied.com/files/canvas/ 中 去 运行 该 工作 示例 ， 
只 需 打 开 控 制 台 ， 然 后 按部就班 新 建 图 形 即 可 。 


6.15.2 ”实现 


首先 ， 我 们 要 在 空白 的 HTML 页 面 中 添加 一 个 canvas 标签 : 


<canvas height="600" width="800" id="canvas" /> 


然后 再 插入 <script> 标 签 ， 我 们 的 JavaScript 代码 就 要 放 在 这 里 : 


t 山 
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<script> 
// ... Code goes here 
</script> 


下 面 ， 我 们 来 实现 JavaScript 部 分 的 工作 。 首 先是 定义 辅助 构造 器 Point， 最 简单 的 
实现 方法 如 下 : 


function Point(x, y) { 
七 五 S 有 三 到 / 


this.y = y; 


要 注意 的 是 ， 该 画布 〈 即 canvas) 的 坐标 系 是 从 x=0、y=0 这 点 开始 的 ， 即 图 6-3 中 
的 左上 角 ， 而 右 下 角 的 坐标 则 是 x=800、y=600。 


接 下 来 ， 轮 到 构造 器 Line 了 ， 它 将 会 根据 勾 股 定理 a + p= 公式 计算 出 给 定 两 点 
之 间 的 直线 距离 (假设 这 两 点 位 于 一 个 右 直角 三 角形 的 斜 边 两 端 )。 


function Line(pl, p2) { 
this.pl = pl; 
this.p2 = p2; 
this.length = Math.sqrt( 
Math.pow (pl.x - p2.x, 2) + 
Math.pow(pl.y - p2.y, 2) 
); 
} 


下 一 步 ,我 们 就 可 以 进入 Shape 构造 器 的 定义 了 ,该 构造 器 需要 有 一 个 自己 的 points 
属性 (以 及 链接 这 些 point 的 Lines 属性 )。 另 外 我 们 还 需要 一 个 初始 化 方法 init ()， 
于 定义 其 原型 。 
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function Shape() { 
]; 


了 


this.points = 


Ce] 


this.lines = [ 
tHe Tri 


接 下 来 进入 正题 : 定义 Shape .Prototype 的 方法 。 下面 我 们 用 对 象 标 识 法 来 定义 所 
有 的 方法 。 其 中 ， 我 们 对 每 个 方法 做 了 相关 的 注释 说 明 。 


Shape.prototype = { 
// reset pointer to constructor 
constructor: Shape, 


// initialization, sets this.context to point 
// to the context if the canvas object 


nlite tarctLdn r() A 
if (this.context === undefined) { 
Var canvas = document .getElementBylid('canvas'); 


Shape.prototype.context = canvas.getContext ('2d"'); 
} ， 


// method that draws a shape by looping through this.points 
draw: function () { 

Var i, ctx = this.context; 

ctx.strokeStyle = this.getColor(); 

ctx.beginPatn (); 

ctx.moveTo (this.points[0] .x, this.points[0].y); 

for (i = 1; i<this.points.lengtn; i++) { 

etx lineTo(this Pointstil dy this. pontslt] yy) 


ctx.closePatnhn (); 
ctx.stroke () 


}, 
// method that generates a random color 
getColor: function () { 

Var i, rgb = []; 

fo (0 -3 入 二 二 寺 


rgb[i] = Math.round(255 * Math.random()); 
} 
FStUEn EoD ob jon Co ct Ty 
}, 


// method that loops through the points array, 
// creates Line instances and adds them to this.lines 
getLines: function () { 
if (this.lines.length> 0) { 
return this.lines; 


210 JavaScript 面向 对 象 编程 指南 (第 2 版 ) 


} 


Vari lines = []; 


for (i = 0; i<this.points.length; i++) 
lines[i] = new Line (this.points[i], 
this.points[0]); 


thisspoLrntsEti + "dy | 
} 
this.lines = lines; 
return lines; 


} ， 


{ 


// shell method, to be implemented by children 


getArea: function () {}, 


// sums the lengths of all lines 


getPerimeter: function () { 


var i, perim = 0, lines = 


} 


return perim; 


this.getLines(); 
for (i = 0; i<lines.length; i++) { 
perim += lines[i].length; 


接着 是 子 对 象 构 造 器 ， 先 从 Triangle 开始 : 


function Triangle(a b, c){ 


this.points = [a, b, cl]; 
this.getArea = function(){ 
Var p = this.getPerimeter (); 
$2 
return Math.sqrt( 
S 


* (s - this.lines[0] .length) 
* (s - this.lines[1].length) 
* (s - this.lines[2] .length)); 


}; 
} 


在 Triangle 构造 器 中 ， 我 们 会 将 其 接收 到 的 三 个 point 对 象 赋值 给 this.points 
此 为 该 对 象 自身 的 点 的 集合 )。 然 后 再 利用 海伦 公式 (Heron's formula) 实 现 其 getArea () 


方法 ， 公 式 如 下 : 


Area = s(s-a) (s-b) (s-c) 


译 者 注 : 海伦 公式 (Heron's formula 或 Hero's formula) ， 又 译 希 罗 公 式 、 希 伦 公式 、 海 龙 公式 ， 此 公式 能 利 


边 长 来 求 取 三 角形 面积 。 最 早出 自 Metrica 一 书 ， 是 


部 二 代数 学 知识 的 结 : 


着 ， 相 传 


数学 家 希 罗 在 公元 60 年 


前 后 


~ 


接 下 来 轮 到 
角 位 置 ) 和 两 边 上 
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其 中 ，s 为 半 周 长 〈 即 周 长 除 以 2)。 


Rectangle 构造 器 了 ， 该 对 象 所 接收 的 参数 是 一 个 point 对 象 〈 即 左上 
的 长 度 。 然 后 再 以 该 point 起 点 ， 自 行 填充 其 points 数组 。 


function Rectangle(p, side a, side b)f{ 


} 


this.points = |[ 


pr 


new Point (p.x + 


new Point (p.x + 


new Point (p.x, 


J 


side a, p.y), // top right 
side a, p.y + side b), // bottom right 


p.y + side b) // bottom left 


this.getArea = function() { 


return side a * side b; 


}; 


最 后 一 个 子 对 象 构造 器 是 Square。 由 于 Square 是 Rectangle 的 一 种 特例 ， 所 以 对 于 
它 的 实现 ， 我 们 可 以 重用 Rectangle， 而 其 中 最 简单 的 英 过 于 构造 器 借用 法 了 。 


function Square (p, side)f{ 


} 


到 


Rectangle.cal 


l(this, p, side, side); 


目前 为 止 ， 所 有 构造 器 的 实现 都 已 经 完成 。 让 我 们 开始 处 理 它 们 之 间 的 继承 关系 ， 


几乎 所 有 的 仿 传统 模式 〈 即 工作 方式 是 基于 构造 器 而 非 对 象 的 模式 ) 都 符合 我 们 的 需求 。 


下 面 ， 让 我 们 来 试 着 将 其 修改 为 原型 链 模式 ， 并 提供 一 个 简化 版 本 《第 一 种 方法 本 章 之 前 


已 经 讨论 oe 在 该 模式 中 ， 我 们 需要 新 建 一 个 父 对 象 实体 ， 然 后 直接 将 其 设置 为 子 对 象 


的 原型 。 这 样 一 来 ， 我 们 就 没有 必要 为 每 个 子 对 象 的 原型 创建 新 的 实体 了 一 一 因为 它们 可 
以 通过 原型 实现 完 全 共享 。 
(人 


} ) 


Var s = new Shape(); 
Triangle.prototype = s; 
Rectangle.prototype = s; 


S， 


Square.prototype = s; 


() 7 


6.15.3 测试 


下 面 我 们 来 绘制 一 些 


区 


形 , 测试 一 下 代码 ,首先 来 定义 Triangle 对 象 的 三 个 point: 
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> var pl = new Point (100，100) ， 
> Var p2 = new Point (300, 100); 
> Var p3 = new Point (200, 0); 


然后 将 这 三 个 point 传递 给 Triangle 构造 器 ， 以 创建 一 个 Triangle 实例 : 


> var 七 = new Triangle(pl, p2, p3); 


接着 , 我 们 就 可 以 调用 相关 的 方法 在 画布 上 绘制 出 三 角形 ,并 计算 出 它 的 面积 与 周 长 : 


> t.draw(); 
> t.getPerimeter(); 
482.842712474619 


> t.getArea (); 
10000.000000000002 


接 下 来 是 Rectangle 的 实例 化 : 


> var r = new Rectangle (new Point (200, 200), 50, 100); 
> r.draw(); 

> r.getArea (); 

5000 


> r.getPerimeter(); 
300 


最 后 是 Square: 


> var s = new Square (new Point (130, 130), 50); 
> s.draw(); 

> s.getArea (); 

2500 


> s.getPerimeter(); 
200 


如 果 想 给 这 些 图 形 绘制 增加 一 些 乐趣 ， 我 们 也 可 以 像 下 面 这 样 ， 在 绘制 Square 时 偷 
个 懒 ， 重 用 triangle 的 point。 


> new Square (pl, 200) .draw(); 
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最 终 测 试 结 果 如 图 6-4 所 示 : 


图 6-4 


6.16 练习 题 


1， 使 用 原型 继承 模式 〈 而 不 是 属性 拷贝 的 方式 ) 实现 多 重 继承 。 例 如 : 
var my = objectMulti (obj, another obj, a third, { 
additional: "properties" 


没 
全 


性 aqditional 应 该 是 私有 属性 ， 而 其 他 属性 则 应 该 归并 入 prototype。 
利用 上 面 的 画布 示例 展开 实践 ， 尝 试 各 种 不 同 的 东西 ， 例 如 : 


We 0 


2. 
令 ”绘制 出 一 些 Triangle、Square、Rectangle 图 形 。 
D4 


添加 更 多 的 图 形 构造 器 ,例如 Trapezoid、Rhombus、Kite 以 及 Pentagon 
等 。 如 果 您 还 想 对 canvas 标签 有 更 多 的 了 解 , 也 可 以 创建 一 个 Circle 构造 器 ， 
该 构造 器 需要 您 重 写 父 对 象 的 draw () 方法 。 
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多 考虑 一 下 ， 是 否 还 有 其 他 方式 可 以 实现 并 使 用 这 些 类 型 继承 关系 ， 从 而 解决 上 述 


问题 ? 


令 请 选择 一 个 子 对 象 能 通过 uber 属性 访问 的 方法 ， 并 为 其 添加 新 的 功能 ， 使 得 父 对 


象 可 以 追踪 到 该 方法 所 属 的 子 对 象 。 例 如 ， 或 许 我 们 可 以 在 父 对 象 中 建立 一 个 用 
于 存储 其 所 有 子 对 象 的 数组 属性 。 


第 7 章 
浏览 器 环境 


之 前 我 们 已 经 说 过 ， 运 行 JavaScript 程序 需要 一 个 宿主 环境 。 到 目前 为 止 ， 
本 书 所 讨论 的 大 部 分 内 容 都 是 围绕 着 ECMAScript/JavaScript 核心 标准 , 以 及 多 种 
不 同 的 宿主 环境 来 展开 的 。 下 面 , 就 让 我 们 将 焦点 转移 到 浏览 器 这 个 当下 最 流行 、 
也 是 最 常见 的 JavaScript 宿主 环境 上 来 吧 。 在 这 一 章 中 ， 我 们 将 学 习 以 下 内 容 : 


BOM (Browser Object Model， 即 浏览 器 对 象 模型 )。 


DOM (Document Object Model， 即 文档 对 象 模型 )。 
浏览 IT 入 忆 驴 器 事件 。 


XMLHttpRequest 对 象 。 


hb4 
多 
多 
多 


7.1 在 HTML 页 面 中 引入 JavaScript 代码 


要 想 在 HTML 页 面 中 引入 JavaScript 代码 ， 我 们 需要 用 到 <script> 标 签 : 


<!DOCTYPE> 
<html> 
<head> 
<title>JS test</title> 
<script src="somefile.js"></script> 
</hnead> 
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<body> 
<script> 
var a= 1; 
at++; 
</script> 
</body> 
</html> 


在 上 面 的 示例 中 ， 第 一 个 <script> 标 志 引 入 的 是 一 个 外 部 文件 somefile.js， 其 
中 包含 了 相关 的 JavaScript 代码 。 而 第 三 个 <script> 标 签 则 是 直接 在 HTML 页 面 中 直接 插 


入 了 JavaScript 代码 。 浏览 器 会 在 页 面 中 按 顺序 执行 所 有 的 JavaScript 代码 ， 


所 有 标签 中 的 


代码 都 共享 同一 个 名 字 空 间 Cnamespace)。 也 就 是 说 ， 这 可 以 使 我 们 在 somefile.js 中 所 


定义 的 变量 ， 在 第 二 个 <script> 区 块 中 依然 可 用 。 


7.2 概述 : BOM 与 DOM 


通常 情况 下 ， 页 面 中 的 JavaScript 代码 都 有 一 系列 可 以 访问 的 对 象 ， 
以 下 几 种 。 


它们 可 以 分 成 


售 ECMAScript 核心 对 象 : 我 们 在 之 前 几 章 中 讨论 过 的 所 有 对 象 都 属 此 类 。 


DOM: 当前 载 入 页 面 所 拥有 的 对 象 〈 页 面 有 时 也 可 以 叫做 文档 )。 
BOM: 页 面 以 外 事物 所 拥有 的 对 象 〈“ 即 浏览 器 窗口 和 桌面 屏幕 )。 


其 中 ，DOM 意 为 文档 对 象 模 型 (Document Object Model)， 而 BOM 意 为 浏览 器 对 象 


模型 (Browser Object Model ) 。 


DOM 是 一 个 标准 ， 由 世界 万 维 网 联合 协会 《W3C) 负责 制定 ， 并 拥有 


多 个 不 同 的 版 


本 。 这 些 版 本 我 们 称 之 为 level， 例 如 DOM level 1、DOM level 2 等 等 。 尽 管 ， 现 代 浏 览 器 


对 这 些 标 准 级 别 的 实现 程度 各 不 相同 ， 但 大 致 上 ， 它 们 基本 上 都 完全 实现 了 


DOM 实际 上 是 对 已 有 功能 的 标准 化 。 在 DOM 制定 之 前 ， 各 浏览 器 都 有 各 自 


DOM level 1。 
访问 文档 的 实 


现 。 其 中 ， 有 相当 一 部 分 是 旧时 代 遗 留 下 来 的 产品 ( 即 W3C 标准 产生 之 前 所 实现 的 部 分 )， 
我 们 将 其 统称 为 DOM 0。 尽 管 ， 实 际 上 并 没有 一 个 叫做 DOM level 0 的 标准 存在 ， 但 其 


相当 的 一 部 分 已 经 成 了 事实 上 的 标准 , 因为 几乎 所 有 的 主流 浏览 器 对 此 提供 


I 


也 正 因为 如 此 ， 它 们 中 的 一 些 内 容 也 被 写 入 DOM level 1 标准 。 至 于 


中 
全 面 的 文 持 ， 


他 在 DOM level 1 
中 找 不 到 的 DOM 0 的 内 容 ， 都 属于 特定 浏览 器 的 特性 ， 这 里 就 不 必 讨 论 了 。 
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而 BOM 则 不 是 任何 标准 的 一 部 分 。 与 DOM 0 相似 ， 它 的 一 部 分 对 象 集合 得 到 了 所 有 
主流 浏览 器 的 支持 ， 而 另 一 部 分 则 属于 特定 浏览 器 的 特性 。 由 于 HIML5S 将 各 个 浏览 器 的 
通用 行为 进行 了 标准 化 ， 所 以 其 中 包含 了 通用 的 BOM 对 象 。 另 外 ， 移 动 设备 也 包含 一 些 
特定 的 BOM 对 象 (HTML5 同样 致力 于 将 它们 标准 化 )， 这 些 对 象 一 般 没 有 必要 在 桌面 计 
算 机 中 实现 , 但 对 于 移动 设备 则 很 重要 , 例如 地 理 位 置 (geolocation )， 摄 像 头 接 入 〈camera 
access), 震动 感知 (vibration), 触摸 事件 (touch events), 通话 (telephony ) 与 短信 收发 (SMS )。 

本 章 将 只 讨论 BOM 和 DOM level 1 中 跨 浏 览 器 的 那 部 分 子 集 。 但 即便 是 这 些 安全 的 子 
集 也 是 一 个 很 大 的 话题 ， 也 不 是 本 书 所 能 完全 履 盖 的 ， 您 可 以 参考 以 下 资源 。 

令 ”Mozilla DOM 参考 资料 : 
http://developer.mozilla.org/en/docs/Gecko DOM Reference 
令 ”Mozilla HTML5 维 基 百 科 : 
https://developer.mozilla.org/en-US/docs/HTIML/HTMLS 


令 ”Microsoft 在 线 文 档 : 
http://msdn2.microsoft.com/en-us/library/ms533050 (vs.85) .a 


spx 


令 W3C 的 DOM 技术 参考 : pttp://www.w3.org/DOM/DOMTR 


7.3 BOM 


BOM〔 即 浏览 器 对 象 模型 ) 是 一 个 用 于 访问 浏览 器 和 计算 机 屏幕 的 对 象 集合 。 我 们 可 
以 通过 全 局 对 象 winaqow 来 访问 这 些 对 象 。 


7.3.1 window 对 象 再 探 


正如 您 所 知 ， 在 JavaScript 中 ， 每 个 宿主 环境 都 有 全 多 局 导轨 。 让 体 到 浏览 器 环境 中 ， 
这 就 是 window 对 象 了 。 环 境 中 所 有 的 全 局 变量 都 可 以 通过 该 对 象 的 属性 来 访问 ， 例 如 : 


> window.somevar = 1; 
1 


> somevar; 
1 


同样 的 ， 所 有 的 JavaScript 核心 函数 《〈 即 我 们 在 和 2 瘟 : 套 天 闪 病 类 型 、 闪 级 、 衣 地 
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及 奥 信 辫 忌 式 中 所 讨论 的 ) 也 都 是 window 对 象 的 方法 。 例 如 : 


> parseInt('123a456"'); 
123 


> window.parseInt ('123a456"'); 
123 


除了 作为 全 局 对 象 的 引用 以 外 ，window 对 象 还 有 另 一 个 作用 ， 就 是 提供 关于 浏览 器 
环境 的 信息 。 每 个 frame、iframe、 弹 出 窗 以 及 浏览 器 标签 页 都 有 各 自 的 window 对 象 。 


下 面 ， 我 们 来 看 一 些 window 对 象 中 与 浏览 器 有 关 的 属性 。 当 然 ， 这 些 属 性 在 各 个 浏 
览 器 的 表现 中 可 能 各 不 相同 , 所 以 我 们 将 尽量 局 限于 那些 为 现代 主流 浏览 器 所 共同 实现 的 、 
最 为 可 靠 的 属性 。 


7.3.2 window.navigator 


navigator 是 一 个 用 于 反映 浏览 器 及 其 功能 信息 的 对 象 。 例 如 ，navigator. 
userAgent 属性 是 一 个 用 于 浏览 器 识别 的 长 字符 串 。 在 Firefox 中 ， 我 们 将 得 到 如 下 信息 : 


> window.navigator.userAgent; 
"Mozilla/5.0 (Macintosh; Intel MacOSX10 8 3) AppleWebKit/536.28.10 (KHTML, 


likeGecko) Version/6.0.3 Safari/536.28.10" 


而 在 Microsoft 的 Internet Explorer 中 ，userAgent 返回 的 字符 串 则 是 : 


"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)" 


由 于 各 种 浏览 器 的 功能 是 各 不 相同 的 ,开发 人 员 有 时 需要 根据 SrA 字符 串 来 识别 
不 同 的 浏览 器 ,并 提供 不 同 版 本 的 代码 。 例 如 在 下 面 的 代码 中 , 我 们 就 是 通过 搜索 “MSIE” 
子 串 来 识别 Internet Explorer: 


if (navigator.userAgent.indexOf ('MSIE') !== -1) { 
// this is IE 
} else { 
// not IE 


} 

当然 了 ， 最 好 还 是 不 要 过 份 依赖 于 这 种 用 户 代理 检测 法 ， 特 性 监听 法 (也 叫做 功能 检 
测 法 ) 无 疑 是 更 好 的 选择 。 因 为 通过 这 种 字符 串 很 难 追 踪 到 所 有 的 浏览 器 以 及 其 各 种 版 本 。 
所 以 ， 直 接 检 查 我 们 使 用 的 功能 在 用 户 浏览 器 中 是 否 存 在 要 简单 得 多 ， 例 如 : 
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if (typeof window.addEventListener === 'function') { 


// feature is supported, let's use it 

} else { 
// hmm, this feature is not supported, will have to 
// think of another way 

} 


另外 , 还 有 一 个 原因 也 促使 我 们 避免 使 用 这 种 用 户 代理 检测 法 ,因为 在 某 些 浏览 器 中 ， 
用 户 是 可 以 对 该 字符 串 进 行 修改 ， 并 将 其 伪装 成 其 他 浏览 器 的 。 


7.3.3 ”控制 台 的 备 忘 功能 
控制 台 提 供 了 一 种 便利 的 对 象 检 索 功 能 ， 
因此 通常 情况 下 ， 我 们 只 要 在 控制 台中 输入 : 


> navigator; 


然后 单 击 其 结果 ， 就 可 以 将 其 所 包含 的 属性 展开 ， 见 图 7-1。 


I 


功能 涵盖 了 BOM 和 DOM 中 所 有 的 对 象 。 


@NO6 Developer Tools - http:/ /www.phpied.com/ 


DE 


Elements Resources Network Sources Timeline Profiles Audits 


》 navigator; 
TNavigator 
appCodeName: "Mozilla" 
appMName: "Netscape" 
appVersion: "5.8 (Macintosh; Intel Mac 05 X 18_7_5) AppleWebKit/537.4 {KHTML, like Ge 
cookieEnabled: true 
kw oeolocation: Geolocation 
language: "en-Us" 
PF mimeTypes:; MimeTypeArray 
onLine: true 
platform: "MacIntel" 
kplugins: PluginArray 
product: "Gecko" 
productSsub: "28838187" 
userAgent: "Mozilla/5.8 【Macintosh; Intel Mac 0S X 18_7_5) AppleWebKit/537.4 (KHTML, 
vendor: "Google Inc." 
vendorsub: ™" 
PFE__proto_ _: Navigator 


园 江 QQ ® <topframe> TT <page context> | | Errors Warnings Logs 


图 7-1 


7.3.4 window.location 


location 属性 是 一 个 用 于 存储 当前 载 入 页 面 URL 信息 的 对 象 。 例 如 其 中 的 
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Location.href 显示 的 是 完整 的 URL， 而 location.hostname 则 只 显示 相关 的 域名 


信息 


口 ,Co 


下 面 ， 我 们 通过 一 个 简单 的 循环 列 出 Location 
假设 我 们 的 页 面 ，URL 为 


http://searc 


过 


nh.phpied.com:8080/search?p=java 


{ 
if (typeof location[i] 


for (var i in location) 


{ 


+ location[i] 


“string”) 


console.1log(i + 


} 

href = 

hash = "#results" 

host = "search.phpied.com:8080" 
hostname = "search .phpied.com" 

pathname = "/search" 

port = "8080" 

protocol = "http:" 

search = "?q=javag&what=script" 


男 外 ，location 对 象 还 提供 了 三 个 方法 ， 分 


replace () 。 


将 当前 页 面 导航 到 新 的 页 面 存在 着 许多 种 不 同 的 方式 , 下 面 列 出 的 


window.location.href 'http://www.packtp 


location.href http://www.packtpub.com' 


location 


'http://www.packtpub.com'; 


V Vv VV 


http://www.packtpub.com' 


与 assign() 基 本 相同 , 只 


location.assign(" 


replace () 方 法 的 作 
中 留 下 记录 : 


> location.replace('http://www.yahoo.com'); 


另外 ， 如 果 我 们 想 重 新 载 入 某 个 页 面 ， 可 以 调用 : 


> location.reload () ， 


或 者 ， 也 可 以 让 location.href 属性 再 次 指向 自 


> window.location.href window.location.hr 


对 象 的 完整 属性 列表 。 


&what=script#results, 那么 : 


直 


ri 


"http://search .phpied.com:8080/search?q=java&what=script#results" 


别 是 reload()、assign() 和 


只 是 其 中 一 小 部 分 : 
CGO 
); 
不 过 它 不 会 在 浏览 器 的 历史 记录 表 
己 ， 比 如 : 


ef; 


MA 
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还 可 以 再 简化 一 下 : 
> location = location; 


7.3.5 window.history 


window.history 属性 允许 我 们 以 有 限 的 权限 操作 同一 个 浏览 嚣 会话 (session) 中 的 
已 访问 页 面 。 例 如 ， 我 们 可 以 通过 以 下 方式 来 查看 用 户 在 这 之 前 访问 了 多 少 页 面 : 


> window.history.length; 
5 


基于 隐私 保护 ， 我 们 无 法 获得 这 些 页 面具 体 的 URL， 例 如 像 下 面 这 样 是 不 被 允许 的 : 


> window.history[0]; 


但 是 我 们 可 以 在 当前 用 户 会 话 中 对 各 页 面 进行 来 回 切换 ， 就 像 您 在 浏览 器 中 单 击 后 退 / 
前 进 按 钮 一 样 : 


> history.forward(); 
> historyback(); 


另外 ， 我 们 也 可 以 用 history.go() 来 实现 页 面 跳 转 ， 例 如 ， 下 面 的 调用 效果 和 
history.back() 相 同 : 


> history.go(-1) 


接 下 来 是 后 退 两 页 的 情况 ; 


> history.go(-2); 


如 果 想 重 载 当前 页 ， 可 以 这 样 : 


> history.go(0) 


另外 ， 如 今 更 新 版 的 浏览 器 也 对 HTML5 的 History API 提供 了 支持 ， 这 些 API 允许 我 
们 在 不 对 整体 页 面 进 行 重 载 的 情况 下 更 改 其 中 的 URL。 这 为 我 们 提供 了 一 种 近乎 完美 的 动 
态 页面 ， 因 为 它 允 许 用 户 对 特定 的 页 面 进行 书签 记录 ， 以 代表 应 用 程序 的 某 一 状态 ， 这 样 
一 来 ， 当 他 们 之 后 返回 到 (或 与 朋友 们 分 享 ) 该 页 面 时 就 能 通过 该 URL 恢复 该 应 用 程序 的 
这 个 状态 。 下 面 ， 我 们 就 来 体验 一 下 这 些 History API， 请 在 任意 页 面 下 打开 控制 台 ， 并 输 
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入 以 下 代码 : 


> history.pushState({a: 1}, "", "nello"); 
> history.pushState({b: 2}, "", "hello-you-too"); 
> history.state; 


请 注意 ， 上 面 的 URL 虽然 被 更 改 了 ,但 页 面 本 身 并 没有 变化 。 接 下 来 ， 您 可 以 在 浏览 
器 中 尝试 着 按 一 下 “后 退 ” 和 和 “前进” 按钮 ， 并 再 次 查看 一 下 history.state。 


7.3.6 window.frames 


window.frames 属性 是 当前 页 面 中 所 有 框架 的 集合 。 要 注意 这 里 并 没有 对 
frame 和 iframe (内 联 框 架 ) 做 出 区 分 。 而 论 当前 页 面 中 是 否 存在 框架 ， 
window.frames 属性 总 是 存在 的 ， 并 总 是 指向 window 对 象 本 身 。 


诈 
全 
由 
i 


> window.frames === window; 


true 


假设 我 们 的 页 面 中 有 一 个 iframe 元 素 : 


<iframe name="myframe" src="hello.html" /> 


我 们 可 以 通过 检查 其 length 属性 来 了 解 当前 页 面 中 是 否 存在 frame 元 素 : 


> frames.length; 
1 


frames 中 的 每 个 元 素 都 包含 了 一 个 页 面 ， 都 有 各 自 的 window 全 局 对 象 。 
如 果 想 访问 iframe 元 素 的 window 对 象 ， 可 以 选择 下 面 方式 中 的 任何 一 种 : 


window.frames[0]; 


window.frames[0] .window; 


> 
> 
> window frames[0] .window.frames; 
> frames[0] .window; 

> 


frames[0]; 


前 过 父 级 页 面 ,我 们 可 以 访问 子 frame 元 素 的 属性 。 例如， 您 可 以 用 以 下 方式 来 实现 
frame 元 素 的 重 载 : 


> frames[0] .window.location.reload(); 


同样 的 ， 我 们 也 可 以 通过 子 元 素来 访问 父 级 页 面 : 


> frames[0] .parent === window; 
true 


另外 ， 通 过 一 个 叫做 top 的 属性 ， 我 们 可 以 访问 到 当前 最 顶层 页 面 〈《 即 包含 所 有 


第 7 章 浏览 器 环境 223 


I 


frame 元 素 的 页 面 ) 中 的 任何 frame 元 素 : 


> window.frames[0] .window.top 


true 


> window.frames[0] .window.top 


true 


> window.frames[0] .window.top 


true 


=== Window; 


=== window.top; 


三 三 全 七 ER》 


除 此 之 外 还 有 一 个 self 属性 ， 它 的 作用 与 window 基本 相同 。 


> self === window; 

true 

> frames[0] .self == frames[0]. 
true 


window; 


他 


如 果 frame 元 素 拥有 name 属性 ， 我 们 就 可 以 丢 开 索引 ， 而 通过 name 属性 的 值 来 访 


问 该 frame。 


> window.frames['myframe'] === 


true 


或 者 ， 你 也 可 以 采用 以 下 代码 : 


> frames.myframe === windows.f 


true 


7.3.7 window.screen 


screen 属性 所 提供 的 是 浏览 器 以 外 


window.frames[0]; 


rames[0]; 


个， 


mT 


的 环境 信息 。 例 如 ，screen.colorDepth 属 履 


包含 的 是 当前 显示 器 的 色 位 《表示 的 是 颜 


> window.screen.colorDeptnh; 
32 


色 质 量 )。 这 对 于 某 些 统计 化 操作 来 说 ， 会 非常 有 


另外 ， 我 们 还 可 以 查看 当前 屏幕 的 实际 状态 〈 如 分 辨 率 ): 


> screen.width; 
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1440 


> Screen.avV 
1440 


> Screen.he 
900 


> Screen.avV 
847 
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ailWidth; 


iOht 


ailHeight; 


其 中 ，height 和 availHeight 之 间 的 不 同 之 处 在 于 ，height 


> window.de 
1 


vicePixelRatio; 


它 是 设备 物理 


7.3.8 window.open(Q/close() 


在 上 面 我 们 探索 了 一 些 win 


一 些 方 法 。 其 中 ， 


dows 对 象 中 最 常见 的 跨 浏览 器 属性 。 


指 的 是 总 分 辩 率 ， 


而 availHeight 指 的 是 除去 操作 系统 菜单 (例如 Windows 操作 系统 的 任务 栏 ) 以 外 的 子 
区 域 。 同 样 的 ，availwidth 的 情况 也 是 如 此 。 


再 比如 以 下 属性 : 


像素 与 设备 独立 像素 〈device-independent pixels，dip) 的 比例 。 例 如 ， 
在 Retina 屏幕 的 iPhone 上 ， 这 个 值 为 2。 


接 下 来 ， 我 们 再 看 


open () 是 一 个 可 以 让 我 们 打开 新 浏览 器 窗口 的 方法 〈 即 弹出 窗 )。 如 今 ， 
多 数 浏览 器 的 策略 及 其 用 户 设置 都 会 阻止 浏览 器 的 弹出 窗 《〈 以 防止 这 种 技术 的 商业 化 小 


window.open () 方 法 主要 接受 以 下 参数。 


4 要 载 入 新 窗口 的 URL。 


令 新 窗口 的 名 字 ， 用 于 新 窗 体 form 标签 的 target 属性 


多 以 喜 号 分 割 的 功能 性 列表 ， 包 括 : 


e resizable: 尺寸 的 可 调整 性 ， 即 是 否 人 允许 月 


] ), 但 在 一 般 情况 下 ， 如 果 该 操作 是 由 用 户 发 起 的 话 , 我 们 就 应 该 允许 


如 果 我 们 想 在 页 面 加 载 时 就 打开 一 个 弹出 窗 的 话 ， 多 数 情况 下 就 会 被 阻止 ， 因 为 该 操作 并 
不 是 用 户 明确 发 起 的 。 


值 。 


所 窗口 弹出 。 否则 ， 


。 width，height: 弹出 窗 的 长 与 宽 。 


日 户 调整 新 窗 


大 小 。 
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。 status: 状态 ， 用 于 设置 状态 栏 的 可 见 性 。 
而 window .open() 方 法 会 返回 一 个 新 建 浏览 器 实例 的 wingdow 对 象 引用 ， 例 如 : 


Var win = window.open('http://www.packtpub.com', ‘'packt', 
'width=300, height=300,resizable=yes'); 


如 您 所 见 ，win 指向 的 就 是 该 弹出 窗 的 window 对 象 。 我 们 可 以 通过 检查 win 是 
falsy 值 来 判断 弹出 窗 是 否 被 屏蔽 了 。 
win.close () 方 法 则 是 用 来 关闭 新 窗口 的 。 
总 而 言 之 ， 在 设置 关于 打开 窗口 这 方面 功能 的 可 访问 性 和 可 用 性 时 ， 您 最 好 要 有 


I 
Ut 


充足 的 理由 。 如 果 我 们 自己 都 不 想 被 网 站 中 弹出 的 窗口 骚扰 的 话 ， 为 什么 还 要 将 其 强 


加 给 用 户 呢 ?” 尽 管 这 种 做 法 有 它 合 理 的 地 方 ， 例 如 填 表 时 为 用 户 提 供 帮 助 信息 等 ， 但 
我 们 完全 可 以 用 其 他 方法 代替 ， 例 如 通过 在 页 面 中 插入 浮动 的 <div> 标 签 方法 来 解决 
这 一 问题 。 


7.3.9 window.moveTo()、window.resizeTo() 


继续 刚才 所 谈 的 “伎俩 ”， 实 际 上 ， 我 们 还 有 许多 方法 可 以 控制 页 面 ， 只 需要 用 户 的 浏 
览 器 设置 允许 我 们 这 么 做 : 

9 调用 window.moveTo (100，100) 将 当前 浏览 器 窗口 移动 到 屏幕 坐标 x= 100， 
y= 100 的 位 置 〈 指 的 是 窗口 相对 屏幕 左上 角 的 坐标 )。 


周 用 windqow.moveBy(10，-10) 将 窗口 的 当前 位 置 右 移 10 个 像素 ， 并 同时 上 
移 10 个 像素 。 


令 调用 与 前 面 move 类 方法 相似 的 window.resizeTo (X，Yy) 和 window.resizeBy 
(X，y) ， 只 不 过 这 里 做 的 不 是 移动 位 置 ， 而 是 调整 窗口 的 大 小 。 


旦 必须 再 次 强调 一 遍 ， 我 们 并 不 建议 读者 使 用 这 些 方法 来 解决 问题 。 


和 sw 


7.3.10 window.alert()、window.prompt()、window.confirm() 


在 盆 2 草 : 套 不 族 闹 类型、 闪 级 、 畜 卫 及 和 人 放 夷 帮 式 中 ， 我 们 已 经 接触 了 alert () 
函数 。 现 在 我 们 又 知道 了 该 函数 只 是 全 局 对 象 的 一 个 方法 。 也 就 是 说 ，alert ('Watch 
out1') 和 window.alert('Watch out!') 这 两 个 函数 是 完全 相同 的 。 
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alert () 并 不 属于 ECMAScript， 而 是 一 个 BOM 方法 。 除 此 之 外 ，BOM 中 还 有 两 个 
方法 可 以 让 我 们 以 系统 消息 的 形式 与 用 户 进行 交互 ， 它 们 分 别 是 : 


令 confirm() 方 法 ， 它 为 用 户 提供 了 两 个 选项 一 一 OK 与 Cancel; 
令 prompt () 方 法 ， 它 为 用 户 提 供 了 一 定 的 文本 输入 功能 
下 面 来 看 看 它们 是 如 何 工 作 的 : 


> Var answer = confirm('Are you cool?'); 


> answer; 


如 您 所 见 ， 这 段 代 码 会 弹出 类 似 这 样 的 窗口 (具体 的 外 观 还 要 取决 于 浏览 器 和 操作 
系统 )， 如 图 7-2 所 示 。 


在 这 里 ， 我 们 将 会 注意 到 两 点 : 


令 ”在 我 们 关闭 该 窗口 之 前 , 控制 台 将 会 停止 接受 任何 输入 , 这 意味 着 JavaScript 代码 
在 此 处 会 暂停 执行 ， 以 等 待 用 户 的 回复 ; 


The page at www.phpied.com says: 
Ne Are you cool? 


| Cancel | B00 有 


7-2 


令 ”如 果 单 击 的 是 “OK”， 方 法 将 会 返回 true， 而 如 果 单 击 的 是 “Cancel” 或 者 按 X 
图 标 〈 也 可 以 按 ESC 键 ) 关闭 该 窗口 则 会 返回 false。 


这 样 一 来 ， 我 们 就 可 以 根据 用 户 的 回答 来 设 定 了 ， 例 如 : 


if (confirm('Are you sure you want to delete this item?')) { 
// delete 

} else { 
// abort 


} 
当然 ， 我 们 还 必须 确保 在 JavaScript 被 禁用 时 或 是 搜索 引擎 访问 页 面 时 能 提供 些 备用 
windqow.prompt () 方 法 呈现 给 用 户 的 是 一 个 用 于 输入 文本 的 对 话 框 ， 例 如 : 


> Var answer = prompt ('And your name was?'); 
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> answer; 


其 对 话 框 如 图 7-3 所 示 (在 Chrome，MacOs 环境 中 ): 


~ The page at file:/ /localhost/ says: 
上 DE And your name was? 


© 


| Cancel | OK | 


其 回复 值 可 能 会 出 现 以 下 情况 : 
令 ”如 果 我 们 直接 单 击 Cancel 或 者 X 图 标 以 及 按 ESC 键 退 出 , 对话 框 将 会 返回 null; 
令 ”如 果 我 们 没有 输入 任何 东西 就 直接 单 击 OK 或 按 回 车 ， 对 话 框 将 会 返回 ""〈 即 空 


字符 串 ); 
4。 如果 我 们 输入 了 一 些 内 容 之 后 单 击 OK (或 按 回 车 )。 对 话 框 就 会 返回 相应 的 文本 
字符 串 。 


另外 ， 该 函数 还 可 以 接受 第 二 个 字符 串 参 数 ， 主 要 用 做 输入 框 中 的 默认 值 。 


7.3.11 window.setTimeout()、window.setInterval() 


setTimeout () 、setInterval () 这 两 个 方法 主要 被 用 于 某 些 代码 片段 的 执行 调度 ， 
其 中 setTimeout () 用 于 在 指定 的 毫秒 数 后 执行 某 段 既定 人 代码， 而 setInterval () 则 用 
于 每 隔 一 段 毫秒 数 重 新 执行 这 段 代 码 。 
下 面 来 看 一 个 在 2 秒 〈 即 2000 毫秒 ) 之 后 弹出 alert 窗口 示例 : 


> function boo() {alert('Boo!');} 
> setTimeout (boo, 2000); 
4 


如 您 所 见 ， 该 函数 返回 了 一 个 整数 〈 在 这 个 例子 中 为 4)， 该 整数 是 该 计时 器 的 ID 。 我 
们 可 以 用 这 个 ID 调用 clearTimeout () 方 法 来 取消 当前 的 计时 器 。 在 下 面 的 示例 中 ， 如 
果 我 们 的 动作 够 快 ， 在 2 秒 之 前 取消 了 计时 器 ，alert 窗口 就 永远 不 会 都 出 现 了 。 


> var id = setTimeout (boo，2000) 
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> clearTimeout (id); 


现在 ， 让 我 们 对 boo0 做 些 改 动 ， 


换 成 一 种 不 那么 骚扰 的 方式 : 


> function boo() {console.log('boo');}; 


接着 ， 我 们 在 setInterval () 中 调用 boo () ， 2 秒 执 行 一 次 ， 直 到 我 们 调用 
clearInterval () 函数 取消 相关 的 执行 调度 为 止 。 


> Var id = setInterval (boo, 
boo 
boo 
boo 
boo 
boo 
boo 


> clearIinterval (id); 


两 个 函数 也 能 接受 可 以 被 eval 


一 
i 


2000); 


最 好 还 是 将 相关 的 函数 调用 封装 成 男 一 个 函数 。 


例如 ， 下 面 代 码 在 语法 上 是 正确 的 ， 但 做 法 并 不 值得 推荐 : 


// bad idea 


Var id = setIinterval ("alert ('boo, boo')", 2000)，} 


显然 我 们 还 有 更 合适 的 选择 : 


Var id = setIintervall 
function(){ 
alert('boo, boo'); 
}, 
2000 
); 


函数 能 恰好 在 那个 时 候 被 执行 。 其 原 


请 注意 ， 虽 然 我 们 有 时 意图 让 某 个 函数 在 数 毫 秒 后 


到 毫秒 的 触发 寻 


要 注意 的 是 ， 上 面 两 个 函数 的 首 参 数 都 可 以 接受 一 个 指向 回调 函数 的 指针 。 同 时 ， 这 
函数 执行 的 字符 串 。 但 eval () 的 危险 之 处 是 众所周知 


的 ， 因 此 它 应 该 尽量 被 避免 使 有 用。 那么， 我 们 怎么 传递 参数 给 该 函数 呢 ? 在 这 种 情况 下 ， 


导 


即 执行 ， 但 JavaScript 并 不 保证 该 
因 之 一 在 于 大 多 数 浏览 器 并 没有 精确 


oy 


件 。 例如， 如 果 我 们 设 定 某 个 函数 在 3 毫秒 以 后 执行 ， 那 么 在 老 版 本 的 IE 中 ， 该 函数 至 少 
会 在 15 毫秒 以 后 才 执 行 。 在 现代 浏览 器 中 ， 这 个 数值 会 短 一 点 ， 但 时 间 差 一 般 不 会 在 1 训 
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秒 以 内 。 另 一 个 原因 在 于 ， 浏 览 器 会 维护 维护 一 个 执行 队列 。100 上 毫秒 的 计时 器 只 是 
着 在 100 毫秒 后 将 指定 代码 放 入 执行 队列 ， 但 如 果 队 列 中 仍 有 还 在 执行 的 代码 ， 那 么 
放 入 的 代码 就 要 等 待 直到 它们 执行 结束 ， 从 而 虽然 我 们 设 定 了 100 毫秒 的 代码 执行 延迟 时 
间 ， 这 段 代码 很 可 能 到 120 毫秒 以 后 才 会 被 执行 。 

最 近 很 多 浏览 器 实现 了 requestAnimatioinFrame () 闲 数 。 该 函数 更 适合 精确 延 
时 ， 因 为 通过 该 函数 设 定 的 计时 器 ， 即 使 浏览 器 没有 资源 ， 也 会 在 那个 时 刻 调用 。 请 在 控 
制 台 下 尝试 如 下 代码 : 


function animateMe () { 


webkitRequestAnimationFrame (function (){ 


console.log (new Date()); 
animateMe () ; 
} ) ; 
} 


animateMe () ; 


7.3.12 window.document 


window.document 是 一 个 BOM 对 象 ， 表 示 的 是 当前 所 载 入 的 文档 〈 即 页 面 )。 但 它 
的 方法 和 属性 同时 也 属于 DOM 对 象 所 涵盖 的 范围 。 现 在, 让 我 们 深 吸 一 口气 放松 一 下 (或 
者 你 可 以 去 试 试 本 章 最 后 的 BOM 练习 )， 随 后 深入 DOM 领域 中 去 吧 ! 


7.4 DOM 


简 而 言 之 , DOM (Document Object Model, 即 文档 对 象 模型 ) 是 一 种 将 XML 或 HTML 
文档 解析 成 树 形 节点 的 方法 。 通 过 DOM 的 方法 与 属性 ， 我 们 就 可 以 访问 到 页 面 中 的 任何 
元 素 ， 并 进行 元 素 的 修改 、 删 除 以 及 添加 等 操作 。 同 时 ，DOM 也 是 一 套 语言 独立 的 API 
(Application Programming Interface， 即 应 用 程序 接口 ) 体系 ， 它 不 仅 在 JavaScript 中 有 相关 
的 实现 ， 在 其 他 语言 中 也 有 实现 。 例 如 ， 我 们 可 以 在 服务 器 端 用 PHP 的 DOM 实现 
(http://php.net/dom) 来 产生 相关 的 页 面 。 


下 面 我 们 来 看 一 个 具体 的 HTML 页 面 : 
<!IDOCTYPE html> 
<html> 
<head> 
<title>My page</title> 
</hnead> 
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<body> 


<p class="opener">first paragraph</p> 


<p><em>second</em> paragraph</p> 
<p id="closer">final</p> 
<!-- and that's about it -一 > 
</body> 
</html> 


我 们 来 看 页 面 中 的 第 二 段 (<p><em>second</em> paragraph</p>)， 首 先 看 到 


的 是 <p> 标 签 ， 它 包含 在 <body> 标 签 
<p> 是 一 个 子 节点 。 同 理 ， 页 面 中 的 
二 段 的 兄弟 节点 。 而 <em> 标 签 又 是 第 二 
如 果 我 们 将 这 些 父 子 关系 
DOM 树 。 


如 图 


7-4， 在 webkit 控 甫 


first Paragraph 
secord paragraph 


final 


Ey = Ee 
| [3 Elements | | 画 | Resources 全 Networ DB Sources 


T=head> 
<titlesMy page</title> 
</head> 
T=body> 
=<p class="opener">first paragraph</p> 
<p> 
<em>second</ em> 
”paragraph” 
<，Yp> 
<p id="closer">final</p> 
<!— and that's about it 一 > 
</body> 
</html> 
图 7-4 
在 图 


二 个 <p> 标 签 
图 形 化 ， 就 会 看 到 一 个 树 状 族谱 


中 可 以 看 到 ， A A A <em> 标 签 


中 。 因 此 ， 我 们 可 以 说 <bodqy> 是 <p> 的 父 节点 ， 而 
第 一 段 和 第 三 段 也 都 是 <body> 的 子 节点 ， 同 时 是 第 


的 子 节点 ,也 就 是 说 <p> 是 的 父 节 点 


( 见 图 7-4)， 我 们 将 其 称 之 为 


台中 ， 单 击 Elements 选项 卡 即 可 打开 此 界面 。 


内 的 


文字 (second) 也 是 一 种 节点 , 这 种 节点 称 为 文本 节点 


中 的 注释 同样 被 认为 是 一 个 树 上 节点 ， 
个 注释 节点 。 


在 这 里 ， 


符 也 是 文本 节点 。 此外, HTML 


<!--and that's about it --> 是 一 


在 DOM 树 中 ， 每 个 节点 都 是 一 个 对 象 ， 右 边 的 Properties 选项 - 


A 


第 7 章 


FE 列 出 了 该 对 象 的 所 有 


1 大 
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属性 ， 以 及 该 对 象 能 够 使 用 的 所 有 方法 ， 它 们 以 继承 链 的 顺序 排列 ， 如 图 7-5 所 示 。 


"| 1 ny i EE 
| Sel Elements | 证 _| Resources © Network 后 Sources CY timeine 


Fs 


忆 - 


| | 
Profiles A Audits [本 Console 


<htmL> 
<head> 
<title>My page</title> 
</head> 
T=<body> 
<p class="opener">first paragraph</p> 
了 <p> 
<em>second</em> 
" paragraph" 


bE Computed Style 
bp Styles 

bp Metrics 

可 Properties 


EF <p> 


PE HTMLParagraphE lement 


bE HTMLE Lement 


<p> 标 签 所 代表 的 DOM 对 象 
而 <nead> 则 对 应 于 


ee EF Element 

<p id="closer">final</p> F Node 

<!-—— and that's about it 一 > Pp Object 

i Pp DOM Breakpoints 
Pp Event Listeners 

7-5 

我 们 也 能 在 选项 卡 中 找到 创建 每 个 DOM 对 象 时 所 使 用 的 构造 器 函数 。 当 然 ， 在 日 常 
开发 中 很 少 用 到 这 个 功能 ， 然 而 这 些 冷 知识 也 很 有 趣 : 例如 ， 
实际 上 是 由 HTMLParagraphElement() 构造 器 创建 的 ， 
HTMLHeadElement () 等 。 不 过 , 虽然 我 们 能 借 此 知道 


但 我 们 并 不 能 直接 使 用 这 些 构造 器 。 


7.4.1 Core DOM 与 HTML DOM 


在 接触 更 有 实际 意义 的 示例 之 前 ， 我 们 还 
经 知道 ，DOM 既 能 解析 XML 文档 ， 


可 以 被 当做 一 种 特殊 的 XML 文档 。 


文档 的 那 部 分 称 之 为 Core DOM ,而 将 在 Core DOM 基础 上 i 


撒 古 县 
需要 最 


后 


做 一 次 概念 性 的 梳 怕 
也 能 解析 HTML 文档 。 实 际 上 ，HTML 文档 本 身 
因此 ， 我 们 可 以 将 DOM Level 1 9 


这 些 DOM 对 象 内 部 构造 器 的 名 字 ， 


E。 现 在 我 们 已 


[去 


FP 用 于 解析 所 有 XML 


行 扩展 的 那 部 分 称 之 为 HTML 


DOM。 当 然 , HTML DOM 并 不 适用 于 所 有 的 XML 文档 ， 它 只 适用 于 HTML 文档 。 下 面 ， 
就 让 我 们 来 看 一 些 属于 Core DOM 和 HTML DOM 的 构造 器 示例 ， 如 表 7-1 所 示 。 
表 7-1 
构造 器 父 级 构造 器 ”| Core 或 HTML 注释 说 明 
Node Core DOM 树 上 所 有 的 节点 都 属于 Node 
Document Node Core Document 对 象 ， 主 要 用 于 表示 XML 文 
档 项 


我 们 将 继续 学 习 : 


列表 ， 可 以 参考 链接 h 
现在 ， 我 们 已 经 对 


ttp://www.w3.org/T 


DOM 理论 背 


续 表 
构造 器 父 级 构造 器 Core 或 HIML 注释 说 明 
即 window.document 或 其 简写 
HTMLDocument Document HTML document 所 指向 的 对 象 。 是 前 一 对 象 的 
HTML 定制 版 ， 应 用 十 分 广泛 
0 ee core 在 源 文 档 中 ， 每 一 个 标签 都 是 一 个 元 素 ， 
Elemen 二 一 去 
所 以 ，<p></p> 标 签 也 叫做 “Pp 元 素 
这 是 一 个 通用 性 构造 器 ， 所 有 与 HTML 
HTMLElement Element HTML 2 、 2 册 ee 
元 素 有 关 的 构造 器 都 继承 于 该 对 象 
HTMLBodyElement | HTMLElement HTML 用 于 表示 <body> 的 标签 的 元 素 
表 一 个 元 素 即 <a_ href=".." 
HTMLLinkElement | HTMLElement HTML 飞 表 A 元 素 ( 即 <a hre 
></ a> 标 下 签 ) 
其 他 构造 器 HTMLElement | HIML 剩 下 所 有 的 HTML 页 面 元 素 
CharacterData Node Core 文本 处 理 类 的 通用 性 构造 器 
即 插 入 在 标签 中 的 文本 节点 。 例 如 在 
Text CharacterData | Core <em>second</em> 这 句 代 码 中 ,就 包含 了 
EM 元 素 节点 和 值 为 “second” 的 文本 节点 
Comment CharacterData | Core 即 <!--HTML 注释 --> 
用 于 代表 各 标签 中 的 属性 ， 例 如 在 代码 
Attr Node Core <P id="closer"> 中 ， 属 性 id 也 是 一 
个 DOM 对象， 由 Attr() 负责 创建 
NodeList Core 即 节点 列表 ， 是 一 个 用 于 年 储 对 象 ， 和 
odeLi A 
自身 length 属性 的 类 数组 对 象 
其 功能 与 上 一 个 对 象 相同 。 不 同 之 处 在 
NamedNodeMap Core 于 , 该 对 象 中 的 元 素 是 通过 对 象 名 而 不 是 
数字 索引 来 访问 的 
其 功能 也 与 前 两 个 对 象 类 似 ， 但 它 是 为 
HTMLCollection HTML 
HTML 特性 量 身 定制 的 
当然 ， 这 里 并 没有 列 出 所 有 的 Core DOM 和 HTML DOM 对 象 ， 如 果 读 者 想 获得 完整 


R/DOM-Level-1/ 中 的 内 容 。 
后 的 实用 性 有 了 更 深入 的 理解 。 在 接 下 来 的 章节 中 ， 


访问 DOM 节点 
修改 DOM 节点 
创建 新 的 DOM 节点 
移 除 DOM 节点 


DOM 节点 的 访问 


名 


在 我 们 进行 表单 验证 或 图 片 蔡 换 这 样 的 操作 之 前 ， 首 先 需 要 


2 
见 
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访问 到 这 些 要 检查 或 修改 


的 元 素 。 季 和 运 的 是 ， 访 问 这 些 元 素 的 方法 有 很 多 ， 我 们 既 可 以 使 
历 ， 也 可 以 使 用 快捷 方式 进行 导航 。 

当然 了 ， 我 们 最 好 还 是 亲自 
例 将 始终 


让 我 们 打开 控制 台 ， 开 始 吧 。 
文档 节点 


document 对 象 给 定 的 就 是 我 们 当前 所 访问 
们 需要 再 次 用 到 控制 台 的 备 忘 功能 。 下 面 ， 在 控制 台 
然后 单 击 展开 其 返回 结果 《〈 见 图 7-6)。 


© 门 www.phpied.comy/filesjjsoopyjch7.html 


7.4.2.1 


中 输入 cons 


ee 


将 这 些 新 对 象 与 方法 都 体验 一 遍 
围绕 DOM 一 节 开 头 所 展示 的 那个 简单 文档 来 展开 。 需 要 的 话 ， 读 者 也 可 以 直接 
通过 访问 http://www.phpied.com/files/jsoop/ch7.html 来 获取 该 页 面 。 现 在 ， 


的 文档 。 为 了 对 该 对 象 进 行进 


DOM 树 的 方式 进行 遍 


。 因 此 接 下 来 ， 我 们 的 示 


ole.dir (document), 


first paragraph 
second paragraph 


final 


琳 引 后 本 imeline 人 profi 
上 Elements 一 | Resources Network = 兽 3ources Timeline 心 : Profiles 


> console.dir(document) 
v#document 
URL: "http://www.phpied.com/files/jsoop/ch7.html" 
PactiveElement: <body> 
alinkColor: "" 
wall: HTMLALLCoLLection [8] 
anchors: HTMLCoLLection[9] 
wapplets: HTMLCoLLection[9] 
attributes: null 
baseURI: "http://www.phpied.com/files/jsoop/ch? .html" 
bgcColor: "" 
wbody: <body> 
characterSet: "IS0-8859-1" 
charset: "IS0-8859-1" 
wchildNodes: NodeList[2] 
comnatMode. "FESIramnat! 


A adits | [console | 


7-6 
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另外 , 我 们 也 可 以 通 
与 方法 ， 如 图 7-7 所 示 。 


过 探 人 


如 您 所 见 ， 图 中 所 有 的 节 
节点 ) 都 拥有 属于 自己 的 nodeType、nodqeName 和 nodeValue 属性 


> Qocument .nodeType; 
9 


€ © 门 www.phpied.com/fi 


点 《 包 扩 


FE。 例如 : 


les/jsoop/ch7.html 


6 文档 类 节点 、 文 本 类 节点 、 元 素 类 节点 以 及 属 怕 


央 台 Elements 选项 卡 来 浏览 document 对 象 的 所 有 DOM 属性 


类 


first paragraph 
second paragraph 


final 


= | E ES fs | rE 
| rr Elements | | 画 _| Resources 全 Nework EE SOUrces CY timeline 绝 Profiles audits [i console 


vT<html> 
bp <head>..</head> 
p<body>.</body> 
</html> 


k Computed Style 
bk Styles 

kb Metrics 
Properties 


TY#document 
URL: 

bE activeElement: 
alinkColor; ™"" 
rall: HTMLALLCoLLection[8] 

Panchors: HTMLCoLLection[g] 

kk applets: HTMLCoLLection[g] 
attributes; null 
baseURI: 
bgColor: "" 

EPE body: <body> 
characterSet: "IS0-B859-1" 
charset: "IS0-8859-1" 

Ek childNodes: NodeList[2] 
compatMode: "CSSlCompat" 


<body> 


"http:/ /wuw. phpied.com/fila 


"http:/ /www. phpied. com 


图 7-7 


在 DOM = 


另外 ， 这 些 节点 也 都 有 各 
名 字 〈 即 tagName 属性 
点 呢 ? 


高 
有 尽 


我 们 可 以 来 看 一 下 : 


> qdqocument .nodeName; 
"#document" 


PF， 节点 类 型 有 12 
document 节点 的 类 型 是 9, 其 


， 每 
他 最 常用 的 节 还 有 1 元 素 )、2〔 属 怕 
自 的 名 字 。 对 于 HTML 标签 来 说 ， 名 字 一 般 就 是 具 


> 


点 类 型 


' 类 型 分 别 用 一 个 整数 来 表示 。 正 如 您 所 见 ， 
E)、3〔 文 本 )。 


\ 体 标签 的 


生 )。 而 对 于 文本 节点 来 说 ， 其 名 字 就 是 #text。 那 么 ，document 节 
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同时 节点 也 都 有 各 自 的 节点 值 , 例如 , 文本 节点 的 值 就 是 它 的 实际 文本 。 但 document 
节点 中 却 不 包含 任何 值 : 


> document.nodeValue; 
null 


7.4.2.2 documentElement 

现在 ， 让 我 们 将 注意 力 转移 到 树 结构 上 来 。 通 常 来 说 ， 每 个 XML 文档 都 会 有 一 个 用 
于 封装 文档 中 其 他 内 容 的 根 节点 。 具 体 到 HTML 文档 上 ， 这 个 根 节点 就 是 <hntml> 标 签 ， 
我 们 可 以 通过 aocument 对 象 的 documentElement 属性 来 访问 它 。 


> document .documentElement; 
<html>..</html> 


该 属性 的 nodeType 值 为 1( 即 这 是 一 个 元 素 类 节点 ): 


> document .documentElement.nodeType; 
1 


对 于 元 素 类 节点 来 说 ， 其 nodeName 和 tagName 属性 就 等 于 该 标签 本 身 的 名 字 : 


> document.documentElement.nodeName; 
"HTML" 


> document .documentElement.tagName; 
"HTML" 


7.4.2.3 子 节 点 


如 果 要 检查 一 个 节点 是 否 存 在 子 节点 ， 我 们 可 以 调用 该 节点 的 naschildNodes () 方法 : 


> document.documentElement.hasChildNodes (); 


true 


HTML 元 素 有 三 个 子 节点 一 一 即 head 元 素 、body 元 素 ， 以 及 两 者 之 间 的 空白 (大 
多 数 浏览 器 都 会 将 空白 算 在 内 ， 但 不 是 所 有 浏览 器 都 如 此 )。 我 们 可 以 通过 该 元 素 中 的 
childNodes 这 个 类 似 于 数组 的 集合 来 访问 它们 。 


> document.documentElement.childNodes.length; 
3 


> document.documentElement.childNodes[0]; 
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<head>..</head> 


> document.documentElement.childNodes[1]; 
#text 


> document.documentElement.childNodes[2]; 
<body>..</body> 


任何 子 节点 都 可 以 通过 其 自身 的 parentNode 属性 来 访问 它 的 父 节点 : 


> document.documentElement.childNodes[1] .parentNode; 
<html>..</html> 


In 


下 面 ， 我 们 将 body 元 素 的 引用 赋值 给 一 个 变量 : 


呀 


> Var bd = document .documentElement.childNodes[2]; 


现在 来 看 看 该 元 素 中 有 几 个 子 节点 : 


> bd.childNodes.length; 
9 


作为 复习 ， 我 们 再 来 看 看 文档 的 body 部 分 : 


<body> 
<p class="opener">first paragraph</p> 
<p><em>second</em> paragraph</p> 
<p id="closer">final</p> 
<!-- and that's about it --> 
</body> 


那么 ， 为 什么 body 有 9 个 节点 呢 ? 让 我 们 来 看 看 ，3 个 段落 加 1 个 注释 是 4 个 节点 。 
然后 ， 这 4 个 节点 之 间 的 空白 处 有 3 个 文本 类 节点 。 这 样 一 来 ， 目 前 为 止 就 有 7 个 了 。 另 
外 ，body 与 首 个 p 标签 之 间 有 一 个 空白 处 ， 那 是 第 8 个 ， 而 comment 元 素 与 </body> 
标签 之 间 也 有 一 个 空白 处 ， 那 义 是 一 个 文本 类 节点 。 是 9 个 子 节点 。 


7.4.2.4 ”属性 


由 于 body 的 第 一 个 子 节点 是 个 空白 ， 因 此 ， 第 二 个 子 节点 (索引 为 1) 是 实际 上 的 第 


一 个 段落 : 


> bd.childNodes[1]; 
<p class="opener">first paragraph</p> 


第 7 章 浏览 器 环境 237 


TH 

缮 | 
3 
下 


我 们 可 以 通过 元 素 的 hasAttributes () 方 法 来 检查 该 元 素 中 是 否 存 在 


> pbd.childNodes[1] .hasAttripbputes () 
true 


那么 ， 该 元 素 中 有 几 个 属性 呢 ? 当前 示例 中 只 有 一 个 ， 即 class 属性 。 


> bd.childNodes[1] .attributes.length; 


1 
我 们 可 以 通过 索引 值 ， 或 属性 名 来 访问 一 个 属性 。 除 此 之 外 ， 我 们 也 可 以 调用 
getAttribute() 方 法 来 获取 相关 的 属性 值 。 
> pbd.childNodes[1] .attripbutes[0] .nodeName; 
"class" 
> pbd.childNodes[1] .attripbutes{[0] .nodeValue; 
"opener" 
> bd.childNodes[1] .attripbutes['class'] .nodeValue; 
"opener" 
> bd.childNodes[1] .getAttribute('class'); 
"opener" 


7.4.2.5 ”访问 标签 中 的 内 容 
下 面 ， 我 们 以 第 一 段 为 例 : 


> pbd.childNodes[1] .nodeName; 
S43 


我 们 可 以 通过 该 元 素 的 textCcontent 属性 来 获取 段落 中 的 文本 内 容 。 如 果 我 们 使 用 


的 是 不 支持 textContent 属性 的 老式 正 浏览 器 , 则 通过 另 一 个 叫 innerText 的 属性 来 
回 相 同 的 值 。 


这 


> bd.childNodes[1] .textContent; 
"first paragraph" 


另外 ， 我 们 也 可 以 通过 innerHTML 属性 来 解决 上 述 问 题 。 尽 管 该 属性 在 DOM 标准 
中 相对 比较 年 轻 ， 但 几乎 所 有 的 主流 浏览 器 对 它 提 供 了 文 持 。 该 属性 可 返回 〈 或 设置 ) 指 
定 节 点 中 的 HTML 人 代码。 因此， 我 们 也 会 看 到 该 属性 与 document 对 象 之 间 的 不 同 之 处 ， 
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后 者 返回 的 是 一 个 可 追踪 DOM 


寺村 


节 


innnerHTML 使 用 极其 方便 ， 以 至 于 它 随 处 可 见 。 


innerText) 完全 相 


会 显 


> bd.childNodes[1].innerHT 


"first paragraph" 


由 于 第 一 段落 中 只 有 文本 ， 所 以 它 的 innerH 


现 出 来 : 


L; 


> bd.childNodes[3].innerHTML; 
"<em>second</em> paragraph" 


> bd.childNodes[3] .textContent; 
"second paragraph" 


除 此 之 外 ， 获 得 第 一 段落 的 文本 内 容 还 有 一 
取 它 的 nodeValue 属性 : 
> pd.childNodes[1] .childNodes.length; 
1 
> pbd.childNodes[1] .childNodes[0] .nodeName; 
"#text" 
> pd.childNodes[1] .childNodes[0] .nodeValue; 


Es 
于 


"first paragraph" 


7.4.2.6 DOM 访问 的 快捷 方法 


通过 childNodes、parentNode、nodeName、n 


辕 性 , 我们 可 以 在 树 结构 的 上 下 层 之 间 实 现 自 


get 


在 这 


点 树 ， 而 前 者 返回 


的 只 是 标签 


Element si 


ByName () 和 g 


Sn 


由 导航 ， 并 处 到 


odeValu 


tE] 


mentById()。 


2 


于 代码 


动 排版 等 因素 ， 


SE 


F 就 不 能 了 


bl] ements] 


za 


付 


字 


以 及 attrib 


处 也 会 成 为 一 个 文本 类 节点 , 这 件 事 会 给 这 种 DOM 工作 方式 带 来 一 些 不 稳定 怕 
"情况 下 ， 只 要 页 面 发 生 一 些 细微 变化 ， 我 们 的 脚本 或 鹿 
果 我 们 访问 的 树 节 点 深度 更 深 一 些 ， 我 们 或 许 
要 一 些 快捷 方法 来 解决 问题 。 


TML 值 和 textcontent (及 IE 中 的 
同 。 但 到 了 第 二 段落 中 ， 由 于 其 中 还 包含 了 em 代码 ， 两 者 的 不 同 就 


方式 ， 即 访问 P 节点 内 的 文本 节点 ， 读 


utes 这 


E 相 关 的 文档 操作 。 但 别 忘 了 ， 


E?。 因为 


E 常 工作 了 。 另 外 ， 如 
就 要 为 此 写 更 多 的 代码 。 这 就 是 为 什么 我 们 需 


这 些 方法 分 别 是 geti ByTagName () 、 


处 的 位 置 、 数 量 总 是 不 确定 的 ， 这 会 给 文本 节点 的 数量 带 来 不 确定 性 和 不 稳定 性 。 
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getElementsByTagName () 以 标签 名 ( 即 元 素 节 点 的 名 字 ) 为 参数 , 返回 当前 HTML 
页 面 中 所 有 匹配 该 标签 名 的 节点 集合 〈 一 个 类 似 于 数组 的 对 象 )。 例 如 ， 以 下 例子 会 返回 所 
有 p 标签 的 总 数 : 


> document .getElementsByTagName ('p') .length; 


列表 中 的 各 项 可 以 用 中 括号 法 或 item () 方法 来 进行 索引 《〈 从 0 开始 ) 访问 。 但 我 们 
并 不 推荐 item() 方法， 与 之 相 比 ， 中 括号 法 显然 更 具有 一 致 性 ， 输 入 也 更 为 简短 : 


> document .getElementsByTagName ('p') [0]; 
<p class="opener">first paragraph</p> 


> document .getElementsByTagName ('p') .item(0); 
<p class="opener">first paragraph</p> 


下 面 我 们 来 获取 第 一 个 p 元 素 中 的 内 容 : 


> document.getElementsByTagName ('p') [0] .innerHTML; 
"first paragraph" 


获取 最 后 一 个 〈 即 第 三 个 ) p 元 素 的 内 容 : 


> qocument .getElementsByTagName ('p') [2]; 
<P id="closer">final</p> 


>4 


对于 这 些 元 素 的 属性 ， 我 们 可 以 通过 attributes 集合 ， 或 者 上 面 所 提 到 的 
getRAttribute () 方 法 来 进行 访问 。 但 我 们 还 可 以 使 用 一 种 更 为 简便 的 方法 ， 即 在 运行 时 
直接 将 属性 名 当做 元 素 对 象 的 属性 来 访问 。 例 如 ， 如 果 想 获取 其 id 属性 的 值 ， 我 们 就 可 以 
直接 将 id 当做 一 个 属性 。 


| 


> document .getElementsByTagName ('p') [2] .id; 
"closer" 


当然 ， 这 种 方法 对 于 第 一 段落 中 的 class 属性 不 起 作用 。 这 种 异常 情况 的 原因 在 于 
“class” 这 个 词 在 ECMAScript 中 被 设置 成 了 保留 字 。 对 此 ， 我 们 只 需要 改 用 className 
即 可 : 


| 


> document.getElementsByTagName ('p') [0] .className; 
"opener" 


另外 , 我 们 也 可 以 直接 调用 getElementsByTagName () 方 法 来 获取 页 面 中 的 所 有 元 素 : 
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> qocument .getElementsByTagName ('*') .length; 

8 

由 于 在 IE7 之 前 的 版 本 中 ,“*” 是 一 个 非法 的 标签 名 ， 所 以 在 这 里 我 们 可 以 改 用 卫 所 
支持 的 集合 document .all 来 返回 页 面 中 的 所 有 元 素 ， 尽 管 我 们 事实 上 很 少 会 用 到 这 类 
方法 。 

在 上 面 介绍 的 快捷 方法 中 ， 还 有 一 个 getElementById() 方 法 。 这 可 能 是 最 常用 的 
元 素 访问 方法 了 。 只 要 我 们 为 元 素 们 设 定好 各 自 的 ID， 然 后 就 能 轻松 地 访问 这 些 元 素 : 

> Qocument .getElementById('closer'); 

<p id="closer">final</p> 

现代 浏览 器 也 支持 其 他 一 些 快捷 方法 ， 包 括 : 

信 getElementByClassName (): 通过 元 素 的 class 属性 寻找 元 素 。 

令 querySelector(): 通过 Css 选择 器 的 方式 寻找 元 素 。 

与 前 一 个 方法 基本 相同 ， 但 上 一 个 方法 仅 返 回 匹配 的 

一 个 元 素 ， 方法 会 返回 所 有 匹配 的 元 素 。 
7.4.2.7 兄弟 节点 、body 元 素 及 首尾 子 节点 
关于 DOM 树 的 导航 操作 ，nextSsibling 与 previousSipbling 这 两 个 属性 也 提供 


了 一 些 便利 。 例 如 ， 如 果 我 们 获得 了 某 个 元 素 的 引用 : 


> var para = document .get 


closer 


> para.nextSibling; 


#text 


> para.previousSibl 


#text 


> para.previousSibl 


<p>..</p> 


> para.previousSibl 


#text 


> para.previousSibl 


ing; 


ElementById("' 


ing.previousSibling; 


<p id="closer">final</p> 


以 下 是 一 些 常 用 的 快捷 方式 : 


'); 


ing.previousSibling.previousSibling; 


ing.previousSibling.nextSibling.nextSibling; 
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> document .body; 
<body>..</body> 


> document.body.nextSibling; 
null 


> document.body.previousSibling; 
<head>..</head> 


另外 ，firstchild/Lastchilad 这 两 个 属性 也 是 非常 有 用 的 。 其 中 ，firstchila 等 价 
于 childNodes[0]， 而 1astchild 则 等 价 于 chilqdNodes[childNodes.length - 1]。 


> document.body.firstChild; 
#text 


> document.body.lastchild; 
#text 


> document.body.lastChild.previousSibling; 
<! 一 and that's about it--> 


> document.body.lastChild.previousSibling.nodeValue; 
" and that's about it " 


下 面 ， 我 们 用 一 张 截图 来 详细 解析 一 下 body 与 这 三 个 段落 之 间 的 族谱 关系 。 当 然 ， 
为 了 简单 起 见 ， 我 们 在 图 7-8 中 省 略 了 所 有 因 空 白 处 而 形成 的 文本 类 节点 。 


区 过 Inspect | window > document 


nodeType 9 四 


nodeName 
localName 
prefix 
namespaceURI 
nodeValue 
omwnerDocument 
parenthode 
nextsibling 
previoussibling 
田 frstchild DocumentType nodeName=htiml nodeType=i0 
parentNode=document 
田 lastchild html 
因 dhildNodes NodeList 0=DocumentiType 1=htmi length=2 
attributes mull 
dir WE 
baseURI "http:/ /ww .phpied.com/files/jsoop/ch? html" 
textcontent null 


7-8 
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7.4.2.8 遍历 DOM 
作为 本 节 的 小 结 ， 我 们 在 这 里 实现 一 个 函数 ， 该 函数 会 从 所 给 定 的 节点 开始 ， 遍 历 整 
个 DOM 树 : 


function walkDOM(n) { 
do { 
console.1log (n); 
if (n.hasChildNodes()) { 
walkDOM (n.firstChild); 
} 
} while (n = n.nextSibling); 


} 
下 面 ， 我 们 可 以 来 测试 一 下 : 


> walkDOM (document .documentElement);}) 
> walkDOM (document .body); 


7.4.3 DOM 节点 的 修改 


现在 ， 我 们 已 经 掌握 了 许多 访问 DOM 树 节 点 及 其 属性 的 方法 ， 理 论 上 我 们 已 经 可 以 
访问 DOM 树 的 任何 一 个 节点 。 下 面 我 们 来 看 看 如 何 对 这 些 节 点 进行 修改 。 


首先 ， 我 们 将 指向 最 后 段落 的 指针 赋值 给 变量 my: 


> Var my = document .getElementBylId('closer'); 


接 下 来 ， 我 们 就 能 轻松 地 通过 修改 对 象 的 innerHTMI 值 来 修改 段落 中 的 文本 : 


> my.innerHTML = "final!l177 
"final!!!" 


由 于 ijnnerHTML 可 以 接受 一 个 HTML 代码 的 字符 串 ， 所 以 我 们 也 可 以 用 它 在 当前 的 
DOM 树 中 再 新 建 一 个 em 节点 : 


> my.innerHTML = '<em>my</em> final'; 
"<em>my</em> final" 


这 样 一 来 。 新 的 em 节点 就 成 为 该 树 结构 的 一 部 分 : 


> my.firstcChild; 
<em>my</em> 
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> my.firstChild.firstChild; 
"my" 


除 此 之 外 ， 我 们 还 可 以 通过 修改 既定 文本 类 节点 的 nodeValue 属性 来 实现 相关 的 文 
本 修改 ; 


> my.firstChild.firstChild.nodeValue = 'your'; 
由 your 由 


7.4.3.1 修改 样式 


4 


很 多 情况 下 ， 我 们 需要 小 修改 的 并 非 一 个 节点 的 内 容 ， 而 是 样式 。 元 素 对 象 中 还 有 
个 style 属性 , 这 是 一 个 用 来 反映 当前 CSS 样式 的 属性 。 例如, 通过 修改 某 段落 的 style 
属性 ， 就 可 以 给 它 加 上 一 个 红色 的 边框 : 


> my.style.border = "lpx solid redq" 
"1Px solid red" 


另外 ， 在 JavaScript 命名 规范 中 ，CSS 属性 中 的 短线 ( 即 “-”) 是 不 可 用 的 。 对 于 这 
情况 ， 我 们 只 需要 直接 跳 过 并 将 下 一 个 单词 的 首 字 母 大 写 即 可 。 例 如 ，padqing-top 可 
以 写成 paddingTop、margin-left 可 以 写成 marginLeft 等 ， 以 此 类 推 。 


> my.style.fontWeight = 'bold'; 
"bold" 


我 们 也 可 以 通过 style 的 cssText 属性 ， 将 CSS 样式 当 作 字 符 串 来 处 理 : 


> my.style.cssText; 
"border: lpx solid red; font-weight: bold;" 


这 样 一 来 ， 对 CSS 属性 的 修改 就 被 归结 为 字符 串 操作 : 


> my.style.cssText += " border-style: dashed;" 
"border: lpx dashed red; font-weight: bold; border-style: dashed;" 


7.4.3.2” 玩 转 表 单 

正如 之 前 所 述 ，JavaScript 是 一 种 很 好 的 客户 端 输入 验证 方式 ， 它 能 蔡 我 们 节省 一 些 与 
服务 器 的 通信 。 下 面 ， 让 我 们 以 当下 最 流行 的 页 面 一 一 Google .conm 的 表单 为 例 ， 来 实际 
操练 一 下 表单 操作 〈 见 图 7-9)。 
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Google Search rm Feeling Lucky 


7-9 


首先 ， 我 们 使 用 querySelector () 方法， 按照 CSS 选择 器 规则 ， 选 取 页 面 中 的 第 一 
个 文本 输入 框 : 


> Var input = document.gquerySelector('input[type=text]'); 


接 下 来 我 们 试 着 访问 我 们 所 选 定 的 搜索 框 : 
> input.name; 
"gm 


Ht 


然后 ， 我 们 通过 设置 value 属性 来 改变 搜索 框 中 的 文字 : 


> input.value = 'my gquery'; 
"my query mm 


我 们 来 恶搞 一 下 ， 将 按钮 中 的 单词 Lucky 蔡 换 为 Tricky: 


> var feeling = document.querySelectorAll ("button") [2]; 
> feeling.textContent = feelingtextContent.replace(/Lu/, ‘'Tri'); 
"Im Feeling Tricky" 


my query 


Google Search T'm Feeling Tricky 
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下 面 ， 我 们 来 实现 这 个 “tricky” 功 能 ， 即 令 按钮 一 秒 钟 显示 或 隐藏 一 次 。 我 们 可 以 通 
过 一 个 叫做 toggle () 的 简单 函数 来 实现 。 当 该 函数 每 次 被 调用 时 ， 它 会 自动 检查 该 按钮 
的 CSS 属性 visibility 值 ， 如 果 为 "hidden"， 则 将 其 设置 为 "visible"。 反 之 亦 然 。 


function toggle () { 


Var st = document.querySelectorAll('button') [2] .style; 
st.visipbility = (st.visibility === 'hidden') 
?2 'visible"' 
'hidden'; 
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当然 , 该 函数 不 是 靠 手 动 调用 的 , 我 们 还 得 设置 一 个 计时 器 ， 令 其 每 秒 钟 被 调用 一 次 : 


> Var myint = setInterval (toggle, 1000); 


知道 会 有 什么 效果 吗 ? 按钮 会 不 停 地 闪烁 〈 这 给 单 
您 玩 大 了 ， 只 要 取消 计时 器 即 可 。 


带 来 了 一 定 的 难度 )。 当 然 ， 如 果 


看 


> ClLearInterVal (myint) 
7.4.4 ”新建 节点 


通常 情况 下 ， 我 们 可 以 用 createElement () 和 createTextNode () 这 两 个 方法 来 
创建 新 节点 。 而 appendCchild() 、insertBefore() 和 replacechind () 三 个 方法 则 
可 以 用 来 将 新 节点 添加 到 DOM 树 结 构 中 。 


让 我 们 回 到 页 面 http://www.phpied.com/files/jsoop/ch7.html, 打开 控制 
台 ， 然 后 开始 吧 ! 


下 面 ， 我 们 创建 一 个 新 的 p 元 素 ， 并 对 它 的 innerHTML 属性 进行 设置 : 


> Var myp = Qocument .createElement ('p'); 


一 


> myp.innerHTML = 'yet another ' ， 
"yet another" 


一 般 来 说 ， 被 新 建 的 元 素 会 自动 获得 所 有 的 默认 


el 


性 ， 例 如 style， 我 们 可 以 对 它 进 


行 修改 : 
> myp.style; 
CssstyleDeclaration 
> myp.style.border = '2px dotted blue'; 


"2px dotted blue" 


通过 appendCchilg() 方 法 ， 我 们 可 以 将 新 节点 添加 到 DOM 树 结构 中 去 。 并 且 ， 该 
方法 应 该 是 在 document .body 上 被 调用 的 ， 这 指定 了 新 节点 应 该 被 创建 在 该 对 象 最 后 一 
个 子 节点 的 后 面 。 


> document .body.appendChild (myp); 
<p style="border: 2px dotted blue;">yet another</p> 


下 面 是 一 张 新 节 点 载 入 页 面 之 后 的 效果 图 〈 见 图 7-11): 
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first paragraph 
second paragraph 
final 


图 7-11 

7.4.4.1 纯 DOM 方法 

通常 情况 下 ， 使 用 innerHTML 来 设置 内 容 会 更 便捷 一 些 ， 如 果 要 使 用 纯 DOM 方法 ， 
我 们 就 必须 : 

1. 新 建 一 个 内 容 为 "yet another" 的 文本 节点 。 

2. 再 新 建 一 个 段落 节点 。 

3. 将 文本 节点 添加 为 段落 节点 的 子 节点 。 

4. 将 段落 节点 添加 为 body 的 子 节点 。 


通过 这 种 方式 , 我 们 可 以 创建 任意 数量 的 文本 节点 和 元 素 ， 并 随心 所 欲 地 安排 它们 之 间 的 
能 套 关 系 。 让 我 们 再 来 看 一 个 例子 ， 如 果 您 想 将 下 面 的 HTML 代码 加 入 pody 元 素 的 后 端 : 


<p>one more paragraph<strong>bold</strong></p> 


也 就 是 说 ， 我 们 所 要 提交 的 东西 有 如 下 结构 : 


P element 
text node with value "one more paragraph" 
STRONG element 
text node with value "bold" 


让 我 们 来 看 看 完成 这 个 代码 应 该 怎么 写 : 


// create P 
Var myp = document.createElement ('p'); 

// create text node and append to P 

Var myt = document.createTextNode('one more paragraph'); 
myp.appendChild (myt); 
// create STRONG and append another text node to it 
Var str = document.createElement ('strong'); 
str.appendChild(document.createTextNode ('bold')); 
// append STRONG to P 
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myp.appendChild(str); 


// append P to BODY 
document .body.appendChild (myp); 


7.4.4.2 cloneNode() 


另外 ,拷贝 (或 克隆 ) 现 有 节点 也 是 一 种 创建 节点 的 方法 。 这 需要 用 到 cloneNode () 
方法 ， 该 方法 有 一 个 布尔 类 型 的 参数 (true = 深 找 贝 ， 包括 所 有 子 节 点 ; false = 浅 
拷贝 ， 只 针对 当前 节点 )。 下 面 。 让 我 们 来 测试 一 下 该 方法 。 


首先 ， 我 们 获取 需要 克隆 元 素 的 引用 : 


> Var el = document .getElementsByTagName ('p')[1]; 


现在 ，el 指向 了 页 面 中 的 第 二 个 段落 ， 内 容 如 下 : 


<p><em>second</em> paragraph</p> 


然后 ， 我 们 来 建立 一 份 el 的 浅 找 贝 ， 并 将 其 添加 到 body 元 素 的 末端 : 


> document.body.appendChildl(el.cloneNode (false)); 


这 时 候 ， 我 们 在 页 面 上 不 会 看 出 有 什么 变化 ， 因 为 浅 拷贝 只 复制 了 p 节点 ， 并 没有 包 
含 它 的 任何 子 节点 。 这 意味 着 该 段落 中 文本 《〈 即 其 中 的 文本 类 节点 ) 并 没有 复制 过 来 。 也 
就 是 说 ， 这 行 代码 的 作用 就 相对 于 : 


> document.body.appendChild (document.createElement ('p')); 


但 如 果 我 们 现在 创建 的 是 一 份 深 拷 贝 ， 那 么 以 p 元 素 为 首 的 整个 DOM 子 树 都 将 会 被 
拷贝 过 来 ， 其 中 包含 了 文本 节点 和 em 元 素 。 这 行 代 码 将 第 二 段 复制 并 插入 到 了 文本 末端 。 


> qdqocument .bodqy.appendqchild(elLl.cloneNodqe (true)); 


如 果 您 愿意 的 话 ， 也 可 以 只 找 贝 其 中 的 em 元 素 : 


> document.body.appendChild(el.firstChild.cloneNode (true)); 
<em>second</em> 


或 者 只 拷贝 内 容 为 "second" 的 文本 节点 : 


> document.body.appendChildl( 
el.firstChild. firstChild.cloneNode (false)); 


"second" 
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7.4.4.3 insertBefore() 

通过 appenqchild() 方 法 ， 我 们 只 能 将 新 节点 添加 到 指定 节点 的 末端 。 如 果 想 更 精 
确 地 控制 插入 节点 的 位 置 ， 我 们 还 可 以 使 用 insertBefore () 方法 。 该 方法 与 
ppendqchilqd() 基 本 相同 ， 只 不 过 它 多 了 一 个 额外 参数 ， 该 参数 可 以 用 于 指定 将 新 节点 
入 哪 一 个 元 素 的 前 面 。 例 如 在 下 面 的 代码 中 ， 文 本 节点 被 插入 pody 元 素 的 末端 : 


oy 


这 


> document.body.appendChild (document.createTextNode ("bool! ') ):， 


我 们 也 可 以 将 同样 的 文本 节点 添加 为 body 元 素 的 第 一 个 子 节点 : 
document.body.insertBeforel 
document.createTextNode ('boo!'), 
document.body.firstChild 
); 


7.4.5 移 除 节点 


要 想 从 DOM 树 中 移 除 一 个 节点 ， 我 们 可 以 调用 removechild() 。 下 面 ， 让 我 们 再 
次 以 body 元 素 为 例 : 


<body> 
<p class="opener">first paragraph</p> 
<p><em>second</em> paragraph</p> 
<p id="closer">final</p> 
<!-- and that's about it -一 > 
</body> 


我 们 移 除 第 二 段落 : 


> Var myp = document.getElementsByTagName ('p')[1]; 
> Var removed = document.body.removeChild (myp); 


如 果 我 们 稍 后 还 需要 用 到 被 移 除 的 节点 的 话 ， 可 以 保存 该 方法 的 返回 值 。 尽 管 该 节点 
已 经 不 在 DOM 树 结构 中 ， 但 我 们 依然 可 对 其 调用 所 有 的 DOM 方法 : 


> removed; 
<p>..</p> 


> removed.firstChild; 
<em>second</em> 
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除 此 之 外 ， 还 有 一 个 replacechild () 方 法 ， 该 方法 可 以 在 移 除 一 个 节点 的 同时 将 另 一 
个 节点 放 在 该 位 置 。 下 面 ， 我 们 来 看 看 之 前 移 除 节 点 之 后 的 情况 ， 现 在 的 树 结构 应 该 是 这 样 : 


<body> 
<p class="opener">first paragraph</p> 
<p id="closer">final</p> 
<!-- and that's about it -一 > 

</body> 


现在 ， 第 二 段 已 经 变 成 了 ID 为 "closer" 的 元 素 : 


> Var p = document.getElementsByTagName ('p')[1]; 
> p; 
<p id="closer">final</p> 


lm 


我 们 用 removed 变量 中 的 段落 蔡 换 掉 变 量 p 指向 的 段落 : 


> Var replaced = qocument .body.replaceChild (removed, p); 


与 fxemoveCchild() 相 似 ，replacechild() 方 法 也 会 返回 被 移 除 节 点 的 引用 : 


> replaced; 
<p id="closer">final</p> 


现在 ，body 元 素 中 的 内 容 如 下 : 


<body> 
<p class="opener">first paragraph</p> 
<p><em>second</em> paragraph</p> 
<!-- and that's about it -一 > 

</body> 


如 果 我 们 想 将 某 个 子 树 中 的 内 容 一 并 抹 去 的 话 ， 最 便捷 的 方式 是 就 将 它 的 innerHTML 
设置 为 空 字符 串 。 下 面 我 们 移 除 body 中 的 所 有 子 节 点 : 


> document.body.innerHTML = ! "7 


m nr 


我 们 来 测试 一 下 : 


> document .body.firstChild 
null 


250 JavaScript 面向 对 象 编程 指南 (第 2 版 ) 


使 用 innerHTML 来 移 除 确实 很 容易 ， 但 如 果 我 们 只 使 用 纯 DOM 方法 的 话 ， 就 必须 
对 其 所 有 的 子 节点 进行 遍历 并 逐个 删除 它们 。 下 面 ， 我 们 给 出 了 一 个 用 于 删除 某 个 指定 节 
点 所 有 子 节点 的 函数 ; 


function removeAll(n) { 
while (n.firstChild) { 
n.removeChild(n.firstChild);} 
} 
} 


如 果 我 们 想 删 除 poqy 中 的 所 有 子 节点 ， 将 页 面 变 成 一 个 空 <body></boqdy> 的 话 
可 以 : 


> removeAll (document .body); 


7.4.6 ”只 适用 于 HTML 的 DOM 对 象 


正如 我 们 所 知 ， 文 档 对 象 模型 同时 适用 于 XML 和 HTML 文档 。 前 面 ， 我 们 已 经 学 习 
了 如 何 对 树 结构 进行 遍历 ， 并 添加 、 删 除 、 修 改 任何 XML 文档 树 中 的 节点 。 但 是 ， 还 有 
一 些 对 象 和 属性 是 只 适用 于 HTML 的 。 

例如 ，document .body 就 是 一 个 纯 HTML 对 象 。 但 它 的 应 用 是 如 此 的 常见 ， 只 要 
HTML 文档 中 包含 了 <body> 标 签 就 可 以 访问 ， 其 功能 等 价 于 document .getElements 
ByTagName ('body') [0]， 但 调用 方式 则 要 友好 得 多 。 


document .body 是 一 个 典型 的 、 根 据 史前 标准 DOM Level 0 和 HTML 特性 扩展 而 来 
的 DOM 对象 。 像 document .body 这 样 的 对 象 还 有 不 少 ， 这 些 对 象 中 ， 有 些 在 Core DOM 
组 件 中 是 找 不 到 等 价 物 的 , 而 有 些 则 可 以 , 但 普遍 都 在 DOM 0 标准 的 基础 上 做 了 一 定 的 简 
化 。 下 面 ， 让 我 们 来 了 解 一 下 这 些 对 象 。 


7.4.6.1 访问 文档 的 基本 方法 
与 如 今 DOM 组 件 可 以 访问 页 面 中 的 任何 元 素 ( 甚 至 包括 注释 和 空白 处 ) 不 同 的 是 ， 
JavaScript 最 初 所 能 访问 的 内 容 只 局 限于 一 些 HTML 文档 中 的 元 素 。 其 主要 由 以 下 一 系列 
集合 对 象 组 成 。 
document .images 一 一 当前 页 面 中 所 有 图 片 的 集合 ， 等 价 于 Core DOM 组 件 中 

) 调用 。 


的 document .getElementsByTagName ('img' 


4 document .applets 一 一 等 价 于 document .getElementsByTagName ('applets').。 


入 
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4 


document.links。 
S document.anchors。 


S document .forms。 


其 中 ，qocument .Links 是 一 个 列表 ， 它 包含 了 页 面 中 所 有 的 <a href="..."> 
</a> 标 签 , 也 就 是 页 面 中 所 有 含有 nref 属性 的 A 标签 。 而 document .anchors 中 包含 
的 则 是 所 有 带 name 属性 的 链接 ( 即 <a name=" .. ."></a>)。 


而 使 用 最 广泛 的 还 是 要 数 document .forms 集合 了 ， 这 是 一 个 <form> 标 签 的 列表 。 
也 就 是 说 ， 我 们 可 以 这 样 访 问 页 面 中 的 第 一 个 form 元 素 : 


> document.forms[0]; 


这 就 相当 于 我 们 调用 : 


> qocument .getElementsByTagName ('form') [0]; 


document .forms 集合 中 包含 一 系列 的 input 字段 和 按钮 ， 我 们 可 以 通过 该 对 象 的 
elements 属性 来 访问 它们 。 下面 我 们 访问 页 面 中 第 一 个 form 元 素 中 的 第 一 个 input 字段 : 


> document.forms[0] .elements[0]; 


一 旦 我 们 获得 了 某 个 元 素 的 访问 权 ， 就 可 以 通过 对 象 同名 属性 访问 该 元 素 的 属性 。 现 
在 假设 第 一 个 form 元 素 的 首 字段 如 下 : 


<input name="search" id="search" type="text" size="50" 
maxlength="255" value="Enter email..." /> 


那么 , 我 们 就 可 以 通过 某 种 方法 改变 该 字段 中 的 文本 ( 即 其 value 属性 的 值 ), 例如 : 


> document.forms[0] .elements[0] .value = 'meQ@example.org'; 
"meQexample.org" 


如 果 想 将 该 字段 动态 地 设置 为 不 可 用 的 话 ， 我 们 也 可 以 : 


> document.forms[0] .elements[0] .disabled = true; 


另外 ， 如 果 form 本 身 或 者 form 中 的 元 素 拥有 name 属性 的 话 ， 我 们 也 可 以 通过 名 
字 来 访问 : 
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> qdqocument .forms [0] .elLlements['search'];// array notation 
> qocument .forms [0] .elements.search; // object property 


7.4.6.2 document.write() 


通过 document .write() 方 法 ， 我 们 可 以 在 当前 页 面 载 入 时 插入 一 些 HTML 元 素 ， 
例如 ， 我 们 可 以 : 


<p>It is now 
<script> 
document.write("<em>" + new Date() + "</em>"); 
</script> 
</p> 


其 效果 与 我 们 直接 在 HTML 文档 中 插入 相关 日 期 相同 : 


<p>It is now 
<em>Fri Apr 26 2013 16:55:16 GMT-0700 (PDT)</em> 
</p> 


需要 注意 的 是 ， 我 们 只 能 在 页 面 正 在 被 载 入 时 调用 document .write () 方 法 ， 如 果 
我 们 试图 在 页 面 载 入 之 后 调用 该 方法 ， 整 个 页 面 的 内 容 都 会 被 蔡 换 掉 。 

事实 上 ， 我 们 很 少 需要 用 到 document .write() 方 法 ， 如 果 您 觉得 需要 的 话 ， 那 就 
应 该 先 尝试 一 下 其 他 方法 。 毕 竟 就 修改 页 面 内 容 而 言 ，DOM Level 1 所 提供 的 方法 要 简单 
灵活 得 多 。 


7.4.6.3 Cookies、 Title、Referrer、Domain 


在 这 一 节 中 ， 我 们 还 将 为 您 介绍 另外 四 个 属性 ， 这 些 属 性 都 属于 从 DOM Level 0 移植 
到 DOM Level 1 的 HTML 扩展 。 并 且 ， 这 些 属性 与 之 前 所 介绍 的 属性 不 一 样 ,它们 在 Core 
DOM 中 并 没有 等 价 物 。 

document .cookie 属性 实际 上 是 一 个 字符 串 ， 其 中 存储 了 用 于 往返 服务 器 端 与 客户 
端 之 间 的 cookie 信息 。 每 当 服 务 器 向 浏览 器 发 送 页 面 时 ， 往 往 都 会 发 送 Set-Cookie 
这 一 HTTP 头 。 当 客户 端 客户 端 再 向 服务 器 发 送 请 求 时 ， 客 户 端 也 会 将 cookie 信息 写 入 
Cookie 这 一 HTTP 头 。 通 过 document .cookie 属性 ， 我 们 可 以 对 浏览 器 的 cookie 信 
息 进 行 某 些 操 作 。 下 面 我 们 来 看 一 个 示例 ， 先 访问 cnn .com 网 站 ， 然 后 在 控制 台中 输入 


document .cookie: 


> document.cookie; 
"mbox=check#true#1356053765| session#1356053704195-121286#1356055565;... 
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document .title 属性 则 是 被 用 来 修改 页 面 在 浏览 器 窗口 中 所 显示 
依然 以 cnn .com 网 站 为 例 ， 我 们 可 以 这 样 做 : 
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的 标题 的 。 下 面 


> document.title = 'My title'; 
"My titlen 
但 要 注意 的 是 ， 这 里 并 没有 改变 <title> 标 签 本 身 的 值 ， 只 是 改变 了 其 在 浏览 器 窗口 中 的 
显示 内 容 。 所 以 ， 该 集合 并 不 等 价 于 document .querySelector('title')。 


document .referrer 中 记录 的 是 我 们 之 前 所 访问 过 的 页 面 URL。 


求 页 面 时 所 发 送 的 HTTP 头 信 息 中 的 Referer 值 是 相同 的 (要 注意 的 是 ， 


这 与 浏览 器 在 请 
HTTP 头 信 息 中 


的 Referer 在 拼写 上 是 错误 的 ， 而 document .referrer 则 是 正确 的 ?)。 例 如， 如 果 您 


> doc 


是 通过 Yahoo! 搜 索 来 访问 CNN 主页 的 ， 我 们 就 会 看 到 如 下 信息 : 


ument.referrer; 


"http://search.yahoo.com/search?p=cnn&ei=UTF-8&fr=moz2" 


通过 document .domain,， 我 们 可 以 得 到 当前 所 载 入 页 面 的 域名 。 我 


域 调用 中 


入 的 内 容 却 


到 它 。 可 以 想象 一 下 ， 如 果 yahoo.com 的 主页 中 有 一 个 iframe 
是 来 自 music.yahoo.com。 它 们 是 两 个 不 同 的 域 ， 根 据 一 般 


则 ， 通 常 避 


况 下 是 不 允许 页 面 与 该 fame 进行 交互 的 。 这 时 候 ， 如 果 我 们 


们 经 常 在 某 些 跨 
标签 ， 其 中 所 载 
想 实现 这 两 个 页 


面 之 间 “ 交 谈 ”， 就 需要 用 document .domain 将 相关 的 域 全 都 设置 为 yahoo .com。 


需要 注意 的 是 ， 域 的 设置 只 能 朝 着 


的 域 可 以 被 改 为 yahoo .com， 但 yahoo .com 的 域 就 不 能 再 被 改 为 www. 
其 他 非 yahoo 域名 了 。 


> OG 


ument .domain; 


"www .yahoo .com" 


> doc 


ument.domain = 'yahoo.com'; 


"yahoo .com" 


>» BC 


ument.domain = 'www.yahoo.com'; 


Error: SecurityError: DOM Exception 18 


.dOG 


ument.domain = 'www.example.org'; 


Error: SecurityError: DOM Exception 18 


9 译 者 注 : 也 就 是 说 ， 我 们 应 该 在 HTTP 头 信息 中 使 用 Referer 这 个 拼写 ， 而 在 document.referrer 中 使 


者 为 双 写 r。 


更 非 具体 化 的 方向 进行 。 例 如 ，www .yahoo .com 


yahoo . com 或 


referrer 这 个 拼写 。 后 


之 前 在 本 章 中 ， 我 们 曾经 为 您 介绍 过 windqow.1location 对象。 那么， 实际 上 我 们 也 
可 以 用 aocument . Location 来 实现 相同 的 功能 


> window.location === document.location; 
true 


7.5 事件 


想象 一 下 ， 如 果 您 突然 在 收音 机 里 听 到 有 人 宣布 :“ 大 事件 ! 重大 事件 ! 外 星人 登陆 地 
球 了 !1” 或 许 您 的 反应 是 “ 耶 ， 我 无 所 谓 !”， 但 有 些 听众 可 能 会 觉得 “它们 是 和 平 使 者 1”， 
而 另 一 些 则 可 能 会 觉得 “这 下 所 有 人 都 要 死 了 !”。 同 样 的 ， 浏 览 器 中 所 发 生 的 事件 也 能 以 
广播 收听 和 监听 的 形式 传递 给 相关 的 代码 。 这 些 事件 包括 : 

% ， 用 户 单 击 某 一 按 包 

4 用户 在 某 一 表单 域 中 输入 字符 ; 

%” 某 页 面 载 入 完成 


我 们 可 以 为 这 些 事 件 指 定 相 应 的 JavaScript 函数 ， 这 些 函 数 通 常 被 称 为 事件 监听 器 
(event listener) 或 事件 处 理 器 (event handler)。 这 样 一 来 ， 浏 览 器 就 会 在 相关 事件 发 生 时 
执行 既定 的 函数 。 下 面 ， 我 们 来 看 看 具体 是 如 何 实 现 的 。 


7.5.1 ”内 联 HTML 属性 法 


最 简便 也 最 难以 维护 的 方式 就 是 通过 标签 的 特定 属性 来 添加 事件 ， 例 如 : 

<div onclick="alert('Ouch!')">click</div> 

在 这 种 情况 下 ， 只 要 该 <div> 所 在 的 区 域 被 用 户 单 击 了 ， 就 会 触发 该 标签 的 单 击 事件 。 
与 此 同时 ， 其 onclick 属性 中 的 字符 串 就 会 被 当做 JavaScript 代码 来 执行 。 尽 管 ， 这 里 并 


没有 显 式 指 定 监听 单 击 事件 的 函数 ， 但 相关 环境 在 幕后 已 经 为 此 创建 了 一 个 函数 ， 函 数 的 
代码 就 等 于 我 们 为 onclick 属性 设 定 的 值 。 


7.5.2 “元素 属性 法 


关于 单 击 事件 函数 ， 我 们 还 有 另 
属性 。 例 如 : 


KS 


i 写 方式 ， 那 就 是 将 其 设置 为 DOM 元 素 节点 的 
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<div id="my-div">click</div> 
<script> 
Var myelement = document.getElementBylId('my-div'); 


myelement.onclick = function() { 
alert ('Ouch!');} 
alert('And double ouch!'); 
} 
</script> 


事实 上 这 也 是 一 种 更 好 的 选择 ,因为 这 种 方式 可 以 帮助 我 们 理 清 <div> 与 相关 JavaScript 
代码 之 间 的 关系 。 一 般 情况 下 。 我 们 总 是 希望 页 面 中 的 内 容 归 HIML、 行 为 归 JavaScript、 
格式 归 CSS， 并 且 三 者 之 间 应 该 尽 可 能 彼此 独立 ， 互 不 干扰 。 

但 这 个 方法 也 是 有 缺点 的 ， 因 为 这 种 做 法 只 允许 我 们 指定 一 个 事件 函数 ， 这 就 好 像 我 
们 的 收音 机 只 能 有 一 个 听众 一 样 。 当 然 ， 我 们 可 以 对 多 个 事件 使 用 同一 个 处 理 函 数 ， 但 这 
样 做 始终 不 太 方便 ， 就 好 像 我 们 每 次 都 得 让 所 有 的 收音 机 听众 都 集中 在 一 个 房间 里 一 样 。 


7.5.3 DOM 的 事件 监听 器 


对 于 浏览 器 来 说 ,最 佳 的 事件 处 理 方 式 当 然 莫 过 于 出 自 DOM Level 2 的 事件 监听 器 了 。 
通过 这 种 方式 ， 我 们 可 以 为 一 个 事件 指定 多 个 监听 器 函数 。 当 事件 被 触发 时 ， 所 有 的 监听 
器 函数 都 会 被 执行 。 而 且 ， 这 些 监听 器 之 间 不 需要 知道 彼此 的 存在 ， 它 们 的 工作 是 彼此 独 
立 的 。 任 何 一 个 函数 的 加 入 或 退出 都 不 会 影响 其 他 监听 器 的 工作 。 

现在 ， 让 我 们 回 到 上 一 节 中 的 那个 简单 标志 页 (您 也 可 以 直接 访问 http://www. 
phpied.com/files/jsoop/ch7.html)， 我 们 所 拥有 的 标志 是 : 


he! 


Rs 


<p id="closer">final</p> 


我 们 可 以 通过 addEventListener() 方 法 为 单 击 事件 赋予 相关 的 监听 器 。 下 面 我 们 尝试 赋 
予 两 个 监听 器 : 


Var mypara = document .getElementById('closer'); 
mypara.addEventListener('click', function(){ 
alert('Boo!') 
}, false); 
mypara.addEventListener( 


'click', console.log.bind(console), false); 


如 您 所 见 ，addEventListeners () 方 法 是 基于 某 一 节点 对 象 来 调用 的 。 它 的 首 参数 
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是 一 个 事件 类 型 的 参数 ， 第 二 个 参数 是 


( 


会 在 相关 事件 发 生 时 被 i 
就 可 以 在 控 和 


El 


判 台 看 到 所 记录 的 事件 对 象 。 单 


> 


bk 


altKkey: false 
bubbles: true 
button: 驴 
cancelBubble: false 
cancelable: true 
charCcode: @ 
CLientX: 19 
clientY: 92 
clipboardData: undefined 
ctrikey: false 
currentTarget:; null 
dataTransfer: mull 
defaultPrevented: false 
detail: 1 
eventPhase: @ 
tromElement: mull 
keyCode: 名 

layerX: 19 

layerY: 92 

metaKkey: false 
offsetX: 11 
offsetY: 8 

pageX: 19 

pageY: 92 
relatedTarget: null 
returnValue: true 
ScreenX: 254 
scerFeenY: 186 
shifttkey: false 
srcecElement: <p> 
target: <ps 
timeSstamp: 1356856143153 
toElement: ps 
type: "click" 

view: Window 
WebkitMovementX: 向 
WebkitMovementY: &@ 
which: 41 

x: 19 

y: 92 


_: MouseEvent 


; 图 Elerments 届 ] RESCUFCES 人 @) Nemwork 区 SOUTCES 加 


TMHouseEvent {webkitMovementY: 日， 


webkitMovementx: @ 


图 7-12 


个 函数 指针 ， 它 可 以 是 function () {alert 
Boo1!') } 这 样 的 匿名 函数 ， 也 可 以 是 console.1Log() 这 样 的 现存 函数 。 该 监听 器 函数 
用 , 调用 时 会 接收 到 一 个 事件 对 象 参数 。 如 果 我 们 运行 上 面 的 代码 ， 
事件 对 象 可 以 查看 其 属性 〈 见 图 


7-12 )。 
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7.5.4 ”捕捉 法 与 冒 泡 法 
在 之 前 调用 addEventListener () 方 法 的 过 程 中 ,我 们 还 传 入 了 第 三 个 参数 false。 
下 面 我 们 来 看 看 这 个 参数 是 什么 。 
假设 我 们 有 一 个 链接 ， 它 被 嵌 套 在 一 个 无 序列 表 标签 内 ， 例 如 ， 


<body> 
<ul> 


<li><a href="http://phpied.com">my blog</a></1i> 
</ul> 
</body> 


当 我 们 单 击 该 链接 时 ， 实 际 上 我 们 也 单 击 了 列表 项 <1i>、 列 表 <ul>、<body> 力 至 于 
整个 document 对 象 ， 这 种 行为 称 之 为 传播 (propagation)。 换 句 话说 ， 对 该 链接 的 单 击 也 
可 以 看 做 对 document 对 象 的 单 击 。 事 件 传播 过 程 通常 有 两 种 方式 : 

信 事件 捕捉 〈event capturing ) 单 击 首先 发 生 在 document 上 ， 然 后 依次 传递 给 

body、 列 表 、 列 表 项 ， 并 最 终 到 达 该 链接 ， 称 为 捕捉 法 。 

人 S ”事件 冒 泡 (event bubbling) 一 一 单 击 首先 发 生 在 链接 上 ， 然 后 逐 层 向 上 冒 泡 ， 

至 document 对 象 ， 称 为 冒 泡 法 。 
按照 DOM Level 2 的 建议 ， 事 件 传播 应 该 分 成 三 个 阶段 ， 先是 捕 提 标签， 然后 到 达 对 
象 ， 再 冒 泡 ( 见 图 7-13)。 也 就 是 说 ， 事 件 传播 的 路 径 应 该 是 先 从 document 到 相关 链接 
(标签 )， 然 后 回 到 daocument 。 如 果 想 要 了 解 某 一 事件 当前 所 处 的 阶段 ， 我 们 可 以 去 访问 


| 


一 、 


es 


事件 对 象 的 eventPhase 属性 。 
(DOCUMENT 
! HIML t 
ll 
| 一/ 
妆 E YE 
bl 
le 
A 2K 
CLICK 
PHASE |: 
AT TARGET 
7-13 


从 历史 上 来 说 ， 了 下 和 Netscape《〈 当 时 业界 并 没有 一 个 统一 的 标准 可 以 遵循 ) 的 相关 实 
现 是 高 度 不 统一 的 。 IE 使 用 冒 泡 法 , 而 Netscape 则 只 使 用 捕捉 法 。 而 在 当今 , 也 就 是 DOM 
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标准 建立 之 后 ， 现 代 浏 览 器 们 终于 统一 实现 了 这 三 个 阶段 。 
我 们 可 以 通过 如 下 方式 处 理事 件 捕获 : 
令 通过 aqdqEventListener () 的 第 三 个 参数 ， 我 们 可 以 决定 代码 是 否 采 用 捕捉 法 
来 处 理事 件 。 然 而 ,为 了 让 我 们 的 代码 适用 于 更 多 的 浏览 器 ， 最 好 还 是 始终 将 其 
设置 为 false， 即 只 使 用 冒 泡 法 来 处 理事 件 。 
令 ”我 们 也 可 以 在 监听 器 函数 中 阻 断 事 件 的 传播 ， 令 其 停止 向 上 冒 泡 ， 这 样 一 来 ， 事 
牛 就 不 会 再 到 达 document 对 象 那里 了 。 为 了 做 到 这 一 点 ， 我 们 就 必须 去 调用 相 
关 事 件 对 象 的 stopPropagation() 方 法 (相关 示例 我 们 将 会 在 下 一 节 中 看 到 )。 
令 ” 男 外 ， 我 们 还 可 以 采用 事件 委托 。 例 如 ， 如 果 某 个 <div> 中 有 10 个 按钮 ， 那 么 ， 
通常 每 个 按钮 都 需要 一 个 事件 监听 器 , 这 样 一 来 , 我 们 就 要 设置 10 个 监听 器 函数 。 
而 更 聪明 的 做 法 是 ， 我 们 只 为 整个 <div> 设 置 一 个 监听 器 ， 当 事件 发 生 时 ， 让 它 
自己 去 判断 被 单 击 的 是 哪 一 个 按钮 。 
作为 参考 ， 我 们 还 是 要 介绍 一 下 在 旧版 本 的 正 中 使 用 事件 捕捉 的 方式 ， 即 使 用 
setCapture() 和 releaseCcaptutre() 方 法 ， 但 是 这 种 方式 只 适用 于 处 理 鼠 标 类 事件 ， 
对 于 其 他 类 型 的 事件 〈 例 如 键盘 类 事件 ) 则 不 起 作用 。 


7.S.$S 阻 断 传播 


下 面 ， 我 们 来 演示 一 下 如 何 让 事件 停止 它 的 冒 泡 式 传播 。 首 先 ， 我 们 回 到 之 前 的 测试 
文档 ， 现 有 的 标签 是 : 


<p id="closer">final</p> 


山中 


| 中 


然后 ， 我 们 来 定义 一 个 用 于 处 理 该 段落 单 击 事件 的 函数 : 


function paraHandler (){ 


alert('clicked paragraph'); 
} 


事件 的 监听 器 ; 


现在 ， 我 们 将 该 函数 设置 为 单 ; 


Var para = document .getElementById('closer'); 


para.addEventListener('click', paraHandler, false); 


同时 ， 我 们 还 可 以 将 该 单 击 监听 器 设置 给 pody、document， 力 至 于 整个 浏览 器 的 
window 对 象 : 
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document.body.addEventListener('click', function(){ 


dlert: (Gli 


}, false); 


ked 


document.addEvent 


body'); 


alert ('clic 


}, false); 


ked 


window.addEventLi 


}, false); 


需要 注意 的 
指 的 是 文档 而 不 
实现 并 不 一 致 。 


现在 ， 如 果 我 们 单 击 一 下 该 段落 ， 就 会 看 到 四 个 警告 窗 ， 它 们 分 别 是 : 


ked 


jstener('click', function(){ 
doG')y 


stener(cLicek'r funictionm()t 


window'); 


， 按 照 DOM 标准 来 说 ，window 事件 是 不 存在 的 。 这 就 是 为 什么 DOM 
浏览 器 。 因 此 ， 实 际 上 浏览 器 对 于 window 事件 的 实现 与 DOM 事件 的 


@ clicked paragraph:; 


@ clicked body; 


人 clicked doc; 


clicked window。 


a 


这 诠释 了 同一 单 击 事件 从 具体 标签 向 整个 窗口 传播 的 全 过 程 (也 就 是 向 上 冒 泡 的 全 


过 程 )。 


addEventListener () 方 法 的 对 立 面 就 是 removeEventListener () ， 该 方法 的 
参数 与 前 者 相同 。 下 面 ， 我 们 移 除 该 段落 上 的 监听 器 。 


> para.removeEventListener('click', paraHandler, false); 


现在 如 果 再 次 单 击 段落 ， 就 只 会 弹出 body、document 对 象 及 window 对 象 的 单 击 
， 不 再 有 针对 该 段落 的 弹出 窗 了 。 

下 面 ， 我 们 来 阻 断 事件 的 传播 。 首 先 要 定义 一 个 以 事件 对 象 为 参数 的 函数 ， 并 在 函数 
内 对 该 对 象 调用 stopPropagation () 方 法 : 


或 


中 


dd 


有 件 


function paraHandler(e){ 


alert('clicked paragraph'); 


e.stopPropagation (); 
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然后 我 们 添加 修改 后 的 监听 器 : 


para.addEventListener('click', paraHandler, false); 


现在 如 果 我 们 再 单 击 段落 ， 就 会 看 到 弹出 窗 只 有 一 个 了 ， 因 为 该 事件 不 会 再 被 上 传 给 
body、document 和 window 了 。 

要 提醒 的 是 ， 如 果 我 们 要 移 除 某 个 监听 器 ， 就 必须 获得 之 前 那 一 个 指定 为 监听 器 函数 
的 指针 。 和 否则 ， 即 便 它 们 的 函数 体 完 全 相同 也 无 济 于 事 ， 因 为 它们 两 者 不 是 同一 个 函数 。 


document.body.removeEventListener('click', 


function() 
alert('clicked body'); 


}, 
false); // does NOT remove the handler 


7.5.6 ”防止 默认 行为 

在 浏览 器 模型 中 ， 有 些 事件 自身 就 存在 一 些 预定 义 行为 。 例 如 ， 单 击 链 接 会 载 入 男 
个 页 面 。 对 此 ， 我 们 可 以 为 该 链接 设置 监听 器 ， 并 使 用 preventDefault () 方 法 禁用 其 
默认 行为 。 

下 面 , 我 们 来 麻烦 一 下 我 们 的 访客 , 让 他 们 在 每 次 单 击 链接 之 后 , 回答 一 个 问题 :“Are 
you sure you want to follow this link2”。 每 当 他 们 单 击 的 是 Cancel ( 即 confirm() 返 回 
false) 时 ，preventDefault () 方 法 就 会 被 调用 : 


// all links 

Var all links = document.getElementsByTagName ('a'); 

for (var i = 0; i < all links.length; i++) { // loop all links 
all links[i] .addEventListener( 


'click', // event type 
function(e){ // handler 
if (!Iconfirm('Are you sure you want to follow this link?'))t{ 
e.preventDefault (); 
} 
}, 


false // don't use capturing 
); 
} 
需要 提醒 的 是 ， 并 不 是 所 有 事件 的 默认 行为 都 是 可 禁止 的 。 尽管 大 部 分 事件 是 可 以 的 ， 
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但 如 果真 的 有 必要 确定 一 下 ， 我 们 可 以 去 检测 事件 对 象 的 cancellable 属性 。 


7.5.7 跨 浏览 如 的 事件 监听 如 


正如 我 们 所 说 过 的 ， 现 在 绝 大 部 分 的 浏览 器 都 已 经 完全 实现 了 DOM Level 1 标准 。 然 


而 ， 事 件 方面 


代 浏 览 器 在 这 方面 的 实现 有 着 不 少 的 差异 。 


的 标准 化 是 到 DOM Level 2 才 完 成 的 。 这 就 导致 了 IE9 以 前 的 版 本 与 其 他 现 


让 我 们 再 引入 一 个 事件 示例 ， 该 示例 将 会 在 控制 台中 返回 被 单 击 元 素 〈 即 目标 元 素 ) 


的 nodeNam 


届 性 值 ; 


oe) 


document.addEventListener('click', function(e)f{ 


consol 


“二 


}, false); 
接 下 来 ， 我 们 仔细 看 看 正 的 实现 究竟 有 哪些 不 同 之 处 。 
信 IE 中 没有 addEventListener() 方 法 ,但 它们 从 IE5 开始 就 提供 了 一 个 叫做 


attach 


EVven 


og (e.target.nodeName); 


() 的 等 效 方法 。 对 于 更 早期 的 版 本 , 我 们 就 只 能 通过 属性 方法 ( 例 


ff 


如 onclick 属性 ) 来 解决 问题 了 。 


Ee 


多 对 了 


单 忆 


6 事件 来 说 ， 使 用 attachEvent () 就 等 同 于 使 用 onclick 属性 。 


令 ”如 果 我 们 使 用 老式 手法 来 进行 事件 监听 (例如 ， 通 过 将 某 个 函数 赋值 给 onclick 
属性 )， 那 么 当 该 回调 函数 被 调用 时 ， 它 不 会 获得 相关 的 事件 参数 。 但 只 要 我 们 设 


置 了 事 伯 


9S 在 下 的 事件 对 象 中 , 没有 用 于 反映 触发 事件 目标 元 素 的 target 属性 ， 
日 它 的 等 效 属性 srcElement。 


以 使 月 


pa 
EF 监听 器，IE 中 总 会 有 一 个 全 局 对 象 window .evnet 会 指向 该 事件 。 


本 


我 们 可 


令 ”正如 之 前 所 提 到 的 ，IE 不 支持 事件 捕捉 法 ， 而 只 使 用 冒 泡 法 来 运作 。 
令 ”IE 中 没有 stopPropagation () 方法， 我 们 可 以 通过 将 正 -only 属性 cancelBubble 
设置 为 true 来 完成 相同 的 操作 。 


人 S 正 - 


人 对 了 


FPF 没有 preventDefault () 方法 ， 我 们 可 以 通过 将 正 -only 属性 returnValue 
设置 为 false 来 完成 相同 的 操作 。 


事 伯 


的 取消 监听 操作 ， 正 中 使 用 的 不 是 removeEventListener () 方 法 ， 


我 们 要 调用 的 是 detachEvent () 方法 。 
这 样 一 来 ， 我 们 就 将 原型 的 代码 修改 成 跨 浏 览 器 版 本 了 : 
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function callback (evt) { 


} 


// prep work 


evt = evt || window.event; 


Var target = evt.target || evt.srcElement; 


// actual callback work 
console.log (target.nodeName); 


// start listening for click events 


主 丰 


} 


} 


} 


(document.addEventListener){ // 


document .add 


else if 


EventListener('click' 


(document .attachEvent){ / 


Modern browsers 
, Callback, false); 
2 "GLd.. 工匠 


Qqocument . attachEvent ('onclick', callback); 


else { 


document.onclick = callback; //an 


7.5.8 ”事件 类 型 


现 


完整 的 


在 ， 


拖 动 。 
键盘 类 事件 。 
。 键盘 键 的 按 下 、 输 入 、 松 开 《〈 这 三 
载 入 /窗口 类 事件 。 


我 们 


也 是 不 同 的 。 
事件 列表 ， 


ZN 


鼠标 键 的 松 开 、 按 下 、 单 击 〈 按 下 并 松 开 一 次 算 单 击 一 次 )、 双 击 。 


已经 了 


事件 的 。 那 么 ， 除 此 之 外 还 有 哪些 事件 呢 ? 


cient 


解 了 如 何 处 理 跨 浏 览 器 事件 ， 但 至 今 为 止 所 有 的 示例 都 是 关于 单 击 


能 需要 去 查看 相关 浏览 


t 


您 可 能 已 经 猜 到 了 ， 不 同 的 浏览 器 支持 的 事件 
Re 


而 另 一 部 分 则 是 这 些 浏览 器 独 有 的 。 关 于 
器 的 文档 。 在 这 里 ， 我 们 只 讨论 跨 浏览 器 事 


鼠标 的 悬 停 〈 指 鼠标 停留 在 某 元 素 上 方 )、 移 出 〈 指 鼠标 从 某 元 素 上 方 离开 )、 


个 事件 是 按 顺序 排列 的 )。 


载 入 《图片 、 页 面 或 其 他 组 件 完 成 载 入 操作 )、 锰 载 〈 指 用 户 离开 当前 页 面 )、 


印 载 之 前 《由 脚本 提供 的 、 多 许 用 户 终 止 印 载 的 选项 )。 


中 止 〈 指 月 


户 在 下 中 停止 页 面 或 


图 片 载 入 )、 错 误 ( 指 在 下 发生 了 JavaScript 


战 怕 


普 误 或 图 片 载 入 失败 )。 
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调整 大 小 〈 指 浏览 器 窗口 大 小 被 重 置 )、 滚 动 〈 指 页 面 进行 了 滚动 操作 )、 上 下 


文 菜单 〈 即 右键 菜单 出 


4 表单 类 事件 。 
获得 焦点 《〈 指 某 字段 获得 输入 )、 失 去 焦点 〈 指 离开 该 字段 )。 

改变 《〈 指 改变 某 字 段 的 值 后 离开 )、 选 中 《 指 茶 文本 字段 中 的 文本 被 选中 )。 
重 置 ( 指 擦 除 用 户 输入 的 所 有 信息 )、 提 交 〈 指 发 送 表 单 )。 


另外 ， 现 代 浏 览 器 还 提供 拖 动 习 
设备 也 会 有 touchstart，touchmove，touchend 事件 等 。 


现 )。 


有 件 ( 


列 如 dragstart，dragend，drop 等 )。 触 控 


有 关 事 件 的 内 容 算 讨论 完了 。 请 读者 参考 本 章 最 后 的 练习 题 ， 选 一 些 富有 挑 


到 这 里 ， 


的 题目 来 实际 体验 一 下 这 些 跨 浏 览 器 事件 的 处 理 操作 。 


7.6 XMLHttpRequest 对 象 


XMLHttpRequest () 是 一 个 


构建 HTTP 请 求 的 JavaScript 对 象 〈 构 造 器 )。 从 历史 


上 来 说 ，XMLHttpRequest《〈 简 称 XHR) 最 初 在 IE 浏览 器 中 是 以 ActiveX 对 象 的 形式 被 引 


入 的 。 但 ] 
逐渐 被 其 


E 式 实现 该 对 象 则 是 始 于 IE7， 那 时 候 也 只 是 该 浏览 器 中 的 一 个 本 地 对 象 ， 后 来 
他 浏览 器 所 接受 , 并 形成 了 一 种 通用 的 跨 浏览 器 实现 , 这 就 是 所 谓 的 AJAX 应 用 。 
这 种 应 用 模式 可 以 使 我 们 无 须 每 次 都 通过 刷新 整个 页 面 来 获取 新 内 容 。 我 们 可 以 利用 


JavaScript 将 相关 的 HTTP 请 求 发 送 给 服务 器 端 , 然后 根据 服务 器 端的 响应 来 局 部 更 新 页 面 。 
及 


总 而 言 之 ， 通 过 这 


方式 构建 出 来 的 页 面 在 i 


F 多 响应 方式 上 会 更 类 似 于 桌面 应 用 。 


实际 上 ，AJAX 就 是 在 JavaScript 和 XML 之 间 所 建立 的 一 种 异步 联系 。 
令 之 所 以 是 异步 ， 是 因为 我 们 的 代码 在 发 送 HTTP 请 求 之 后 ， 不 需要 特地 停 下 来 等 


待 月 


R 务 器 响应 ， 可 以 继续 执行 其 


常 以 事件 的 形式 出 现 )。 
令 ”JavaScript 一 一 它 的 作用 很 明显 ，XHR 对 象 就 是 用 JavaScript 来 创建 的 。 


4 至 了 
并 用 其 中 的 数据 来 更 新 页 面 的 。 但 是 如 今 这 种 做 法 已 经 不 太 常 见 了 ， 这 种 方式 更 
也 用 来 获取 纯 文 本 格式 的 数据 , JSON 格式 的 数据 , 或 只 是 一 段 等 待 被 插入 页 面 


多 


] XML, 则 是 因为 开发 者 最 初 设计 这 种 HITP 请 求 就 是 用 来 获取 XML 文档 ， 


他 任务 ， 待 相关 信息 到 达 时 自然 会 收 到 通知 〈 通 
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的 HTML 数据 。 
关于 XMLHttpRequest 对 象 的 用 法 ， 主 要 可 以 分 为 两 个 有 效 步骤 。 


令 发 送 请 求 在 这 一 步 又 中 , 我 们 需要 完成 XMLHttpRequest 对 象 的 构建 ， 并 为 其 
设置 事件 监听 器 。 


% ”处 理 响应 一 一 在 这 一 步骤 中 , 事件 监听 器 会 在 服务 器 的 响应 信息 到 达 时 收 到 通知 ， 
然后 相应 的 代码 就 会 被 执行 。 
7.6.1 “发送 请 求 
首先 ， 我 们 来 简单 地 创建 一 个 对 象 〈 对 于 不 同 的 浏览 器 ， 可 能 在 细节 上 会 略 有 些 
不 同 ): 
Var xhr = new XMLHttpRequest (); 


接 下 来 要 做 的 就 是 为 该 对 象 设置 一 个 能 触发 readystatechange 事件 的 事件 监听 器 : 


xhr.onreadystatechange = myCallback; 


然后 ， 我 们 需要 去 调用 其 open () 方法， 具体 如 下 : 


xhr.open('GET', '‘'somefile.txt', true); 


如 您 所 见 ， 第 一 个 参数 指定 是 HTTP 请 求 的 类 型 (包括 GET、POST、HEAD 等 )。GET 
和 POST 是 其 中 最 常见 的 类 型 。 当 需要 发 送 的 数据 不 是 很 多 ， 且 不 会 改写 服务 器 数据 时 ， 我 
们 一 般 会 用 GET 类 型 , 否则 就 会 使 用 POST 类 型 ,而 第 二 个 参数 则 是 我 们 所 请 求 目标 的 URL。 
在 这 个 示例 中 ， 我 们 所 请 求 的 是 一 个 与 当前 页 面 处 于 同一 目录 的 文本 文件 somefile.txt。 
最 后 一 个 参数 是 一 个 布尔 类 型 的 值 ， 它 决定 了 请 求 是 否 按 照 异步 的 方式 进行 ， 是 就 为 true 
(大 多 数 情 况 下 都 为 此 选项 )， 否 则 就 为 false〔 此 选项 会 阻塞 JavaScript 执行 ， 等 待 直 
到 该 请 求 的 返回 数据 到 来 )。 


当然 了 ， 最 后 是 发 送 请 求 。 


xhr.send(''); 


另外 只 要 我 们 愿意 ， 可 以 用 send () 方 法 在 发 送 请 求 时 附带 上 任何 数据 。 对 于 GET 类 
请 求 来 说 ， 这 里 所 发 送 的 是 一 个 空 字符 串 。 因 为 数据 将 被 包含 在 URL 中 。 而 对 于 POST 请 
求 来 说 ， 它 是 表单 数据 中 的 一 个 查询 字符 串 key=valuegkey2=value2。 
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这 样 


FE 意 力 转向 其 他 


来 ， 请 求 被 发 送出 去 之 后 ， 我 们 的 代码 (以 及 用 户 ) 就 可 以 将 六 


任务 。 待 它 收 到 服务 器 端 响应 时 ， 会 自动 启动 回调 函数 mycallback。 
7.6.2 ”处 理 响应 


我 们 已 经 为 readystatechange 事件 设置 了 监听 器 , 那么 这 个 事件 究竟 是 怎么 回 事 呢 ? 


每 个 XHR 对 象 中 都 有 一 个 叫做 readyState 的 属性 。 一 旦 我 人 


的 值 ， 就 会 触发 readystatechange 事件 。 该 属性 可 能 的 状态 值 如 下 : 
令 0 一 一 未 初始 化 状态 ; 


令 ”1 一 一 载 入 请 求 状态 ; 
令 2 一 一 载 入 完成 状态 ; 
令 3 一 一 请 求 交 互 状态 ; 
令 ”4 一 一 请 求 完成 状态 。 


] 改 变 了 该 属性 


当 readyState 的 值 为 4 时 , 就 意味 着 服务 器 端的 响应 信息 已 经 返回 ， 
了 。 在 myCallback 函数 中 ， 除 了 确定 readyState 的 值 是 4 之 外 ， 我 人 


下 HTTP 评 


可 以 开始 处 理 
] 还 必须 检查 一 


4 求 的 状态 码 。 因 为 如 果 目 标 URL 实际 上 并 不 存在 ， 我 们 就 会 收 到 一 个 值 为 404 


的 状态 码 〈 表 示 未 找到 文件 )， 正 常情 况 下 该 值 应 该 为 200。 因 此 ，mycallback 有 必要 对 
该 值 进行 检查 ， 该 状态 码 可 以 通过 XHR 对 象 的 status 属性 来 获得 。 


旦 确定 了 xhr .readyState 的 值 为 4 并 且 xhr.status 的 值 为 20 


通过 xhr.responseText 来 访问 目标 URL 中 的 内 容 了 。 下 面 ， 我 们 看 看 如 何在 


myCallback 中 实现 用 简单 的 alert () 方 法 来 显示 目标 URL 中 的 内 容 : 


funct 
卫生 
至 


} 


人 和 f 
a 


人 


// 


ion myCallback() { 
(xhr.readyState < 4) { 
eturn; // not ready yet 


(xhr.status !== 200) { 
lert('Error!'); // the HTTP status code is not OK 


eturn; 


all is fine, do the work 


0， 我 们 就 可 以 
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alert (xhr.responseText); 


} 


一 且 我 们 获得 了 所 请 求 的 东西 ， 就 可 以 将 其 添加 到 页 面 中 ， 或 者 用 于 某 些 计 算 以 及 其 
他 我 们 所 能 想到 的 地 方 。 

这 两 个 处 理 步 又 (发送 请 求 、 处 理 响 应 ) 是 整个 XHR/AJAX 编程 方式 的 核 
心 部 分 。 现 在 我 们 已 经 基本 掌握 了 ， 可 以 去 构建 下 一 个 Gmail 了 。 哦 ， 对 了 ， 我 们 还 得 介 
一 些 浏览 器 之 间 的 6 微 的 不 一 致 之 处 。 


7.6.3 在 早 于 7 的 下 版 本 中 创建 XMLHttpRequest 对 象 


在 早 于 版 本 7 的 Internet Explorer 浏览 器 中 ，XMLHttpRequest 对 象 是 以 ActiveX 对 象 
的 形式 存在 的 ， 因 此 创建 XHR 实例 的 方式 会 有 些小 小 的 不 同 ， 有 具体 如 下 : 


NSS 


Var xhr = new ActiveXObject ('MSXML2 .XMLHTTP.3.07) 


其 中 ，MSXML2.XMLHTTP.3.0 是 我 们 所 要 创建 对 象 的 标识 符 。 因 为 实际 上 ， 
XMLHttpRequest 对 象 有 几 个 不 同 的 版 本 ， 如 果 访 问 我 们 网 页 的 客户 没有 安装 最 新 的 版 本 ， 
在 放弃 他 们 之 前 ， 或 许 您 应 该 试 试 前 两 个 版 本 。 

对 于 一 个 完整 的 跨 浏 览 器 解决 方案 而 言 ， 我 们 应 该 首先 对 用 户 浏览 器 所 支持 的 
XMLHttpRequest 对 象 进 行 检查 ， 如 果 该 浏览 器 中 没有 这 个 对 象 ， 我 们 就 得 使 用 下 方案。 
此 ， 整 个 创建 XHR 实例 的 过 程 应 该 像 这 样 : 


| 


Var ids = ['MSXML2.XMLHTTP.3.0', 
'MSXML2 .XMLHTTP' 
'Microsoft .XMLHTTP']; 


Var xhr; 

if (XMLHttpRequest) { 
xhr = new XMLHttpRequest (); 

} else { 
//IE:try to find an Activex object to use 
for (var i = 0; i < ids.lengtnhn; i++) { 


try { 
xhr = new ActiveXObject (ids[i]); 
break; 

} catch (e){} 


ActiveX 对 象 的 ID 列表 。 变 量 xhr 指向 间 


那 


出 


XMLHttLP] 
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下 面 来 看 看 这 段 代 码 完 竟 做 了 哪些 事 。 首 先 ， 数 组 idqs 是 一 个 包含 了 所 有 可 能 饶 


i 建 的 XHR 对 象 。 然 后 ， 我 们 的 代码 会 先 测试 一 
下 XMLHttpRequest 对 象 ， 看 看 这 是 否 存 在 。 如 果 是 ， 就 意味 着 当前 浏览 器 支持 


Request () 构造 器 的 (也 就 是 说 ， 该 浏览 器 是 较为 现代 的 浏览 器 )， 如 果 不 是 ， 


么 代码 就 得 通过 遍历 ias 中 的 可 能 项 来 尝试 着 创建 对 象 。catch (e) 则 可 以 捕获 其 中 创 


循环 。 


后 面 


建 失败 的 项 目 并 使 循环 继续 。 如 此 ， 只 要 有 一 个 XHR 对 象 被 成 功 创建 ， 我 们 就 可 以 提前 退 


正如 您 所 见 ， 这 段 代码 有 点 长 ， 所 以 最 好 还 是 将 其 


I 象 成 一 个 函数 。 实 际 上 ， 在 本 章 


的 练习 题 中 就 有 一 题 要 求 我 们 创建 属于 我 们 自己 


7.6.4 A 代表 异步 


现在 ， 我们 已经 了 解 了 如 何 创 建 一 个 XHR 对 象 ， 只 


时 相关 的 请 求 响应 即 可 。 但 妇 


二 个 请 求 的 响应 先 于 第 一 个 请 求 返回 会 发 生 什么 ? 


在 前 面 的 例子 中 , XHR 对 象 都 是 属于 全 局 域 的 , myCcallback 要 根据 这 个 全 局 对 象 的 
存在 状态 来 访问 它 的 readqyState、status 和 responseText 属性 。 除 此 之 外 还 有 一 


二 


方法 ， 可 以 让 我 们 摆脱 对 全 
下 面 我 们 来 看 看 具体 如 何 做 : 


Var xhr = new XMLHttpRequest () 


xhr.onreadystatechange = 


return function()f{ 


myCallback 
}; 
}) (xhr); 


(myxhr); 


xhr.open('GET', '‘'somefile.txt', true); 


xhr.send(' 


在 这 种 情况 下 ，myCallback 将 会 以 参数 的 形式 接 


可 


全 局 空间 的 问题 。 同 时 ， 这 也 意味 着 当 该 请 求 


" ) 7 


[0 果 我 们 异步 发 送 了 两 个 训 


的 AJAX 工具 集 。 


需 给 它 一 个 既定 的 URL， 然 后 处 


(function (myxhr) { 


求 会 发 生 什么 呢 ? 或 者 说 ， 如 果 第 


局 对 象 的 依赖 ， 那 就 是 将 我 们 的 回调 函数 封装 到 一 个 闭 包 中 


发 相 关 的 XHR 对 象 ， 这 就 避免 使 


于 次 获得 


响应 信息 时 ， 原 来 的 xhr 变量 就 


以 被 第 二 次 请 求 重用 了 。 因 为 我 们 在 闭 包 内 保留 了 该 对 象 的 原 有 信息 。 


7.6.5 XX 代表 XML 


尽管 作为 数 和 


中 传输 格式 来 说 ， 最 近 JSON (我 们 会 在 下 一 章 中 介绍 ) 在 风头 上 已 经 盖 过 了 
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XML, 但 XML 仍然 是 我 们 的 一 个 选择 。 除 了 responseText 属性 外 ，XHR 对 象 还 有 男 一 个 
名 为 responsexML 的 属性 。 如 果 我 们 向 一 个 XML 文档 发 送 一 个 HITP 请 求 ， 该 属性 就 会 指 
向 该 XML 的 DOM document 对 象 。 因 此 ， 对 于 该 文档 的 操作 ， 我 们 可 以 对 它 调用 之 前 所 讨论 
的 core DOM 方法 ,例如 getElementsByTagName () 、getElementById () 等 。 


7.6.6 “实例 示范 


下 面 , 让 我 们 通过 一 个 具体 的 实例 来 总 结 一 下 关于 XHR 对 象 的 各 种 话题 。 您 也 可 以 在 
http://www.phpied.com/files/jsoop/xhr.html 中 找到 相关 页 面 , 并 测试 该 示例 
中 的 操作 。 

该 主页 xhr .html 是 一 个 非常 简单 的 静态 页 面 ， 其 中 只 含有 三 个 <div> 元 素 : 


<div id="text">Text will be here</div> 
<div id="hntml">HTML will be here</div> 
<div id="xml">XML will be here</div> 


然后 ， 我 们 在 控 和 
入 相关 的 <qQiv> 中 。 


一 局 


台中 输入 相关 代码 ， 向 三 个 文件 发 送 请 求 ， 并 将 它们 各 自 的 内 容 载 


这 三 个 文件 所 载 入 的 分 别 是 。 


令 content .txt 一 一 一 段 简单 的 文本 ， 内 容 为 "I_ am a text file"。 
content .html1 一 一 一 段 HTML 代码 ， 有 具体 如 下 : 


"I am <strong>formatted</strong> <em>HTML</em>" 


令 content.xml 一 一 一 个 XML 文档 ， 内 容 如 下 : 
<?xml version="1.0" ?> 
<rOOt> 
I'm XML data. 
«EOS 


要 注意 的 是 ， 上 面 所 提 到 的 所 有 文件 都 与 xhr.html 存在 同一 个 目录 中 。 


出 于 安全 因素 ， 我 们 只 能 对 同一 个 域 使 用 

» XMLHttp-Request 请 求 文件 。 然而 ,现代 浏览 器 也 支持 

QQ XHR2， 它 支持 跨 域 请 求 ， 前 提 是 HTTP 请 求 有 合适 的 
Access- Control-Allow-Origin 头 信息 。 


加 
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我 们 先 来 提取 请 求 /响应 部 分 的 功能 ， 创 建 函数 如 下 : 


function request(url, callback) { 
Var xhr = new XMLHttpRequest (); 


xhr.onreadystatechange = (function (myxhr) { 
return function () { 
if (myxhr.readyState === 4 && myxhr.status === 200) { 


callback (myxhr); 
} 
}; 
} (xhr) ); 
xhr.open('GET', url, true); 


xhr.send(''); 


该 函数 接受 两 个 参数 ， 一 个 是 我 们 所 请 求 的 URL， 男 一 个 则 是 响应 返回 后 所 要 调用 的 


调 函 数 。 接 下 来 ， 我 们 要 调用 三 次 该 函数 ， 每 个 文件 一 次 ， 具 体 如 下 : 


request( 
'http://www.phpied.com/files/jsoop/content.txt"', 
function(o)f{ 


document .getElementBylId('text') .innerHTML = 
oOo.responseText; 
} 
); 
request ( 
'http://www.phpied.com/files/jsoop/content.html', 
function(o)f{ 
document .getElementBylId('html') .innerHTML = 
oOo.responseText; 


} 
); 
request( 
'http://www.phpied.com/files/jsoop/content.xml', 
function(o)f{ 


document .getElementBylId('xml') .innerHTML = 
oO.responseXML 


.getElementsByTagName ('root') [0] 
“EirstChild 
.nodeVvalue; 


在 这 里 ， 回 调 函 数 都 是 以 内 联 的 方式 来 定义 的 。 前 两 个 函数 的 实现 很 类 似 ， 它 们 都 只 
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需要 用 其 所 请 求 文件 中 的 内 容 蔡 换 掉 相 关 <div> 中 的 HTML 文本 即 可 。 第 三 个 函数 则 略 有 
不 同 ， 因 为 它 涉及 一 个 XML 文档 。 首 先 ， 我 们 需要 通过 o .responseXML 调用 来 访问 该 
XML 文档 的 DOM 对 象 。 然 后 再 调用 getElementsByTagName () 获取 页 面 中 所 有 
<root> 标 签 的 列表 (实际 上 只 有 一 项 )，<root> 标 签 的 firstchilg 是 一 个 文本 节点 ， 
所 以 我 们 用 其 nodevalue 属性 来 获取 这 段 文本 ( 即 “Im XML data”), 并 用 它 蔡 换 掉 <div 
id="xml"> 中 的 HIML 内 容 。 整 体 效果 如 图 7-14 所 示 ; 


I am a text file 
[am formatted HTML 
I'm XML data. 


7-14 


对 于 XML 文档 上 的 操作 ， 我 们 也 可 以 通过 调用 o .responseXML.documentElement 来 
获取 <root> 元 素 , 以 取代 o.responseXML.getElementsByTagName ('root') [0]。 
记 住 ,documentElement 所 指向 的 就 是 一 个 XML 文档 的 根 节点 。 特 别 对 于 HTML 文档 
来 说 ， 它 的 根 节点 始终 都 是 <html> 标 签 。 


7.7 本章 小 结 


本 章 所 涉及 的 内 容 相 当 多 。 首 先 , 我 们 介绍 了 一 系列 跨 浏 览 器 的 BOM (浏览 器 对 象 模 
型 ) 对 象 ， 其 中 主要 包括 : 
令 全 局 对 象 window 的 系列 属性 ， 例 如 navigator、location、history、 


frames、screen 等 ; 


令 及 其 方法 ， 例 如 setInterval() 和 setTimeout () ;alert()、confirm() 


和 prompt () ; moveTo/By() 和 resizeTo/By()。 
然后 ， 我 们 介绍 了 有 关 DOM (文件 对 象 模型 ) 的 内 容 ， 这 是 一 个 以 树 型 结构 来 表示 
HTML (或 XML) 文档 的 方法 ， 其 中 的 每 一 个 标签 或 文本 都 是 该 树 结构 上 的 节点 。 我 们 详 
细 介 绍 了 以 下 几 点 。 


MA 


音 
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令 ”节点 访问 。 
。 通过 parentNode、childNodes、firstChild、lastChild、 nextSibling、 
previousSibling 这 些 带 有 父 / 子 关 联 性 的 属性 来 访问 。 
。 通过 getElementsById()、getElementsByTagName ()、getElements 
ByName () 及 querySelectorAll () 等 方法 来 访问 。 
令 ”节点 修改 。 
。 通过 innerHTML 或 ijinnerText/textContent 属性 来 进行 。 
。 通过 nodeValue 或 setAttripute() 以 及 对 象 属性 中 的 相关 属性 来 进行 。 
。 通过 removechild() 或 *eplacechild() 来 移 除 节点 。 
。 以 及 通过 appendchild()、cloneNode () 、insertBefore () 等 方法 来 添 
加 新 节点 。 
另外 , 我 们 还 介绍 了 一 些 从 DOM 0( 这 是 正式 标准 化 之 前 的 产物 ) 中 移植 到 DOM Level 
1 中 的 属性 ， 其 中 包括 以 下 几 部 分 。 
令 一 系列 集合 对 象 。 例 如 document 对 象 的 forms、images、1links、anchors 
以 及 applets。 但 相对 来 说 ，DOM 1 中 的 getElementsByTagName () 显然 
更 为 灵活 实用 。 
令 document .body， 这 是 一 种 能 方便 访问 <body> 元 素 的 特定 属性 。 
令 另外， 我 们 还 介绍 了 document 中 的 title、cookie、referrer、domain 


从 


四 大 特殊 属性 。 
接着 ,我 


门 为 您 介绍 了 浏览 器 事 伯 


F 的 传播 方式 。 尽 管 


~ 


务 设置 得 更 全 


认 行为 。 


最 后 ， 我 们 还 学 习 了 有 关 XMLHttpRequ 
向 应 能 力 的 Web 页 面 ， 主 要 分 为 两 个 步骤 。 


E， 向 服务 器 发 送 HTTP 请求， 以 获得 相关 数据 。 
服务 器 的 响应 信息 ， 并 更 新 页 面 中 的 相关 部 分 。 


人 


有 即时 
多 首 ? 
人 然后， 处理 


局 化 。 男 外 ， 我 们 还 介 引 


官 
易 ， 但 也 是 完全 有 可 能 的 。 由 于 事件 是 以 冒 泡 形式 传播 的 ， 


了 如 


可 阻 断 事件 的 传播 


est 对 象 


] 要 实现 跨 浏 览 嚣 模式 3 
此 ， 我 们 可 以 将 监听 任 


因 


不 


路 径 ， 以 及 如 何 改 变 其 默 


的 知识 ， 该 对 象 也 允许 我 们 构建 一 
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7.8 练习 题 


在 本 章 之 前 , 我 们 的 练习 题 都 是 可 以 在 各 自 章节 的 


您 会 发 现 有 些 练 习题 需要 我 们 对 本 书 以 外 的 内 容 
1. BOM 


作为 BOM 的 练习 来 说 ， 我 们 可 以 试 着 写 出 许多 错误 的 、 富 


E 文 中 找到 解决 方案 的 。 但 这 一 次 ， 
有 更 多 的 了 解 〈 或 实践 经 验 )。 


骚扰 性 的 、 对 用 户 非常 


不 友好 的 代码 ， 以 及 所 有 非常 Web 1.0 的 东西 。 例 如 晃动 的 浏览 器 窗口 。 请 试 着 令 浏览 
弹出 一 个 200 x 200 的 窗口 ， 然 后 将 其 大 小 渐变 成 400 x 400， 接 着 将 窗口 上 下 左右 不 停 移 


动 ， 造 成 地 震 效 果 。 为 了 实现 这 种 效果 ， 我 们 需要 movex* () 函数 ， 其 


中 需要 一 次 或 多 次 调用 


setInterval ()， 最 后 可 能 还 需要 setTimeout () 及 clearInterval () 来 令 其 停止 操作 。 


或 者 我 们 可 以 更 简单 一 些 , 将 当前 日 期 时 间 通 过 qocument .tit] 


中 ， 并 像 钟 表 一 样 每 秒 钟 更 新 一 次 。 
2. DOM 


e 实时 显示 在 浏览 器 的 标题 栏 


令 ” 换 一 种 不 同 的 方式 来 实现 walkDOM() 方 法， 以 回调 浮 


console.1o0g () 便 编码 。 


UD 


令 ”使 用 innerHTML 来 移 除 相关 内 容 确实 很 方便 ( 即 docum 


数 参 数 的 形式 来 代替 


ent .bodqy. innerHIML = " 


")， 但 未 必 总 是 最 好 的 选择 。 如 果 在 其 中 有 元 素 被 设置 了 事件 监听 器 ， 那 么 当 该 元 
素 被 移 除 时 , IE 并 不 会 解除 该 元 素 与 监听 器 之 间 的 关联 。 这 就 有 可 能 会 导致 浏览 器 


中 内 存 泄漏 ， 因 为 它们 所 引用 的 内 容 已 经 不 存在 了 。 因 


此 ， 请 你 实现 一 个 通用 的 移 


除 DOM 节点 的 函数 ， 它 会 在 移 除 节 点 的 同时 移 除 相关 的 事件 监听 器 。 你 可 以 遍历 


目标 节点 的 属性 ， 检 查 这 些 属性 值 是 否 属于 函数 类 型 ， 如 果 是 (例如 最 常见 的 


onclick 属性 )， 你 就 需要 在 该 元 素 节点 被 烛 


| 除 之 前 将 该 属性 设置 为 null。 


令 ” ”创建 一 个 叫做 ijncluge() 的 函数 , 该 函数 可 以 按 需 将 外 部 脚本 引入 当前 页 面 。 你 
可 以 首先 动态 创建 一 个 新 的 <script> 标 签 ， 然 后 设置 其 s 
到 <heag> 标 签 末端 。 该 函数 应 通过 如 下 测试 : 


> include('somescript.js'); 


3. 


| 
QU 
个 


rc 属性 ， 再 将 它 插入 


创建 一 个 叫做 myevent 的 跨 浏 览 器 事件 工 


L 集 (或 对 象 集 ), 其 


中 应 该 包含 以 下 方法 。 
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S addqListener (element，event name, callback) 一 一 县 中 的 element 


参数 也 可 以 是 一 个 元 素数 组 。 


removeListener (element, event name, callback)。 


S getEvent (event) 对 于 正 的 早期 版 本 ， 我 们 可 以 通过 检查 window .event 
性 来 实现 。 

S getTarget (event) 。 

S stopPropagation (event) 。 

S preventDefault (event) 。 

其 用 例如 下 : 


function myCallback(e) { 


= myevent .getEvent (e) 


alert (myevent .getTarget (e) .href); 
myevent .stopPropagation\ 


了 


e) 
myevent .preventDefault (e) 
} 


myevent .addListener (document.links, 'click', myCallback); 


如 


执行 这 段 示 例 代码 应 该 会 使 该 文档 中 所 有 的 链接 失效 ， 只 不 过 ， 它 们 在 被 单 击 时 会 弹 


出 一 个 alert () 窗口 ， 以 显示 其 nref 属性 。 


创建 一 个 以 像素 定位 的 <div> 元 素 , 坐标 为 x=100 px, y=100 px。 然后 编写 代码 使 <div> 


元 素 能 按照 以 下 按键 了 ( 左 )、K (和 右 )、M (下 )、I (上 ) 或 对 应 方向 键 的 操作 方式 在 页 国 


中 移动 。 并 且 ， 在 编写 过 程 中 可 以 重用 您 刚刚 实现 的 事件 工具 集 。 
4，XMLHttpRequest 对 象 
创建 一 个 名 为 ajax 的 XHR 工具 集 (或 对 象 集 )， 其 示例 用 法 如 下 : 


function myCallback (xhr) { 
alert (xhr.responseText); 
} 
ajax.request('somefile.txt', 'get', myCallback); 
ajax.request('script.php', 'post', myCallback, 
'first=John&last=Smith'); 


第 8 章 
编程 模式 与 设计 模式 


到 目前 为 止 ， 我 们 已 经 掌握 了 JavaScript 的 面向 对 象 特 性 ， 如 原型 和 继承 ， 
并 且 接 触 了 一 些 使 用 浏览 器 对 象 的 实例 。 接 下 来 ， 我 们 将 介绍 一 些 JavaScript 中 
的 常用 模式 及 其 使 用 方法 。 


首先 什么 是 模式 ? 简单 地 说 ， 模 式 就 是 专门 为 基 些 常见 问题 开发 的 、 优 秀 的 解决 方案 。 

通常 ， 当 我 们 面 对 一 个 新 的 编程 问题 时 ， 往 往 会 发 现 眼 前 的 这 个 问题 与 我 们 之 前 
解决 过 的 某 个 问题 有 很 多 相似 之 处 。 这 时 候 , 您 或 许 就 可 以 考虑 将 这 些 问题 抽象 归 类 ， 
以 寻求 一 个 通用 性 的 解决 方案 。 而 所 谓 模式 ， 实 际 上 就 是 一 系列 经 过 实践 证 明 的 、 针 
对 某 类 问题 的 、 有 具有 可 重用 性 的 解决 方案 (或 者 是 寻求 解决 方案 的 方法 )。 
有 时 候 ， 模 式 仅仅 是 一 个 用 于 帮助 我 们 思考 的 想法 或 名 字 。 例 如 ， 当 您 与 团队 中 
其 他 开发 人 员 讨 论 某 类 问题 或 方案 时 ， 模 式 可 以 被 当做 一 个 术语 来 使 用 ， 以 使 交流 变 
得 更 容易 一 些 。 

而 有 时 候 我 们 所 面 对 的 问题 可 能 要 更 特殊 一 些 ， 以 至 于 可 能 根本 找 不 到 任何 适用 
的 模式 。 这 时 候 ， 切 忌 盲 目 使 用 模式 ， 生 搬 硬 套 在 任何 时 候 都 不 是 一 个 好 主意 。 因 为 
在 这 种 情况 下 ， 往 往 不 使 用 模式 要 比 为 了 套用 某 个 现 有 模式 而 去 强行 改变 问题 本 身 要 
好 得 多 。 

在 本 章 ， 我 们 将 讨论 的 模式 主要 分 为 两 大 类 : 

令 编程 模式 (coding pattern ) 一 一 一 些 专门 为 JavaScript 语言 开发 出 的 最 佳 实践 方案 ; 
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9 设计 模式 〈design pattern) 一 一 这 些 模式 与 具体 语言 无 关 ， 它 们 主要 来 自 那 本 著名 的 
GoF 所 著 的 《设计 模式 》? 一 书 。 


8.1 编程 模式 


在 本 章 的 第 一 部 分 中 ， 我 们 首先 要 讨论 一 些 与 JavaScript 语言 特性 密切 相关 的 模式 。 
其 中 有 些 模 式 主要 用 来 组 织 代 码 〈 如 命名 空间 模式 )， 有 些 则 与 性 能 改善 有 关 《〈 如 延迟 定义 


和 初始 化 时 分 支 ;)， 还 有 些 会 涉及 一 些 JavaScript 语言 缺失 的 特 物 


《比如 私有 属性 )。 总 而 


言 之 ， 本 节 将 讨论 以 下 几 种 模式 : 
令 行为 隔离 ; 


私有 函 
即时 函 


JSON。 


一 $$ $$ $$ $$ $$ $$ 4 


5 
5 


| 


令 内容 ( 
令 外 观 ( 


命名 空间 ; 
初始 化 分 支 ; 

延迟 初始 (惰性 初始 ); 
配置 对 象 ; 

私有 变量 和 方法 ; 
特权 方法 ; 


数 的 公有 化 ; 
数 ; 


链 式 调用 ; 


行为 隔离 


E 如 我 们 所 知 ， 一 个 网 页 通常 有 三 个 要 素 : 


HTML ); 
CSS ); 


2?《 设 计 模 式 ， 可 复 
有 关 软 件 设计 的 一 本 


面向 对 象 软件 的 基础 》 (Design Patterns: Elements of Reusable Object-Oriented Sofiware) 是 软件 工程 领域 


Gamma, Richard Helm, 


攻 ， 提 出 和 总 结 了 对 于 一 些 常见 软件 设计 问题 的 标准 解决 方案 ， 称 为 软件 设计 模式 。 该 书 作 者 为 : Erich 
Ralph Johnson，John Vlissides， 后 以 “四 人 帮 ” (Gang of Four，GoF ) 著称 。 一 一 译 者 注 
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令 行为 (JavaScript )。 
8.1.1.1 内 容 
HTML 所 代表 的 是 网 页 的 内 容 ， 也 就 是 文字 。 理 想 状况 下 ， 内 容 的 HTML 标签 应 该 尽 
量 精简 ， 而 又 能 恰到好处 地 组 织 内 容 的 语义 。 例 如 <ul> 和 <1i> 标 签 可 用 于 导航 菜单 ， 因 为 
后 者 只 是 一 组 链接 而 已 。 
通常 情况 下 ， 内 容 (HTML) 中 是 不 应 该 包含 格式 化 元 素 的。 可 视 化 格式 之 类 的 元 素 
中 该 属于 外 观 层 的 东西 ， 通 常 交 由 CSS 来 实现 ， 这 意味 着 我 们 应 该 : 
尽量 避免 在 HTML 标签 中 使 用 style 属性 ; 
令 ”不 要 使 用 与 外 观 有 关 的 HTML 标签 ， 例 如 <font>; 
令 ” 尺 量 根据 语义 需要 来 选择 标签 ,而 不 是 去 考虑 浏览 器 会 如 何 绘 制 它 们 。 例如， 开发 人 
员 有 时 候 对 <div> 标 签 的 使 用 实际 上 不 如 <p> 标 签 来 得 更 合适 。 同 理 ， 我 们 应 该 更 多 
地 使 用 <strong> 和 <em> 而 不 是 <b> 和 <i>， 因 为 后 者 更 强调 的 是 外 观 而 不 是 语义 。 
8.1.1.2 外观 
要 将 外 观 与 内 容 分 开 ， 有 一 种 好 方法 就 是 对 浏览 器 默认 的 绘制 行为 进行 重 置 ， 例 如 
YUI 库 中 的 reset .css。 这 样 一 来 , 浏览 器 默认 的 绘制 方式 就 不 会 影响 我 们 对 语义 标签 
的 选择 了 。 
8.1.1.3 行为 
网 页 中 的 第 三 要 素 是 行为 。 行 为 也 ed ed 行为 通常 是 由 
JavaScript 负责 定义 的 ， 且 只 由 <script> 标 签 来 标记 。 a a 
件 中 。 这 意味 着 我 们 使 用 的 不 是 类 似 于 onclick，onmouseover 这 样 的 内 髓 属性 ， 而 是 


利用 前 几 章 中 曾经 介绍 过 的 adqdEventListener/attachEvent 方法 来 进行 事件 定义 。 


关于 行为 与 内 容 的 隔离 ， 我 们 通常 有 以 下 几 条 原则 性 策略 。 

令 ” 尺 可 能 少 用 <script> 标 签 。 

”尽量 不 要 使 用 内 幅 事 件 的 处 理 方法 。 

人 ”尽量 不 要 使 用 CSS 表达 式 。 

令 ” 当 JavaScript 被 用 户 禁用 时 ， 我 们 要 动态 地 添加 一 些 表 示 无 目标 的 替换 标记 。 
令 ”在 内 容 末 尾 、<body> 标 签 之 前 ， 插 入 一 个 external .js 文件 。 
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8.1.1.4 ”行为 隔离 实例 


下 面 ， 假 设 我 们 有 一 个 搜索 表单 ， 该 表单 中 的 内 容 需 要 通过 JavaScript 来 验证 。 在 这 
里 ， 我 们 没有 在 form 标签 内 使 用 任何 JavaScript 代码 ， 而 只 是 在 <body> 标 签 结 束 之 前 插 
入 一 个 <script> 标 签 ， 并 令 其 指向 一 个 外 部 脚本 文件 。 


中 


<body> 
<form id="myform" method="post" action="server.php"> 
<fieldset> 
<legend>Search</legend> 
<input 
name="search" 
id="search" 
type="text" 
7 
<input type="submit" /> 
</fieldset> 
</form> 
<scriptsrc="behaviors.js"></script> 
</body> 


而 在 benaviors .js 文件 中 ， 我 们 为 submit 事件 设 定 了 一 个 处 理 方 法 ， 用 以 检查 
输入 文本 框 是 否 为 空 。 若 为 空 ， 则 不 提交 表格 。 这 样 的 设计 会 节省 一 次 客户 端 与 服务 端 之 
间 的 通信 ， 应 用 也 会 根据 输入 马上 做 出 响应 。 

以 下 是 bpehaviors .js 的 完整 实现 ， 在 其 中 ， 我 们 用 到 了 前 一 章 练 习题 中 所 实现 的 
myevent 工具 : 


/7 Enit 
myevent .addListener('myform', 'submit', function(e)t{ 


// no need to propagate further 


= myevent .getEvent (e); 


myevent .stopPropagation (e); 
// validate 


Var el = document .getElementById('search'); 
if (lel.value) { // too bad, field is empty 


myevent .preventDefault(e); // prevent the form submission 


alert('Pleas nter a search string'); 
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8.1.1.5 “异步 的 JavaScript 代码 载 入 
在 这 个 例子 中 ,我 们 注意 到 ，<script> 标 签 被 放置 在 <body> 元 素 的 最 末 。 这 么 做 
因为 载 入 JavaScript 代码 的 过 程 会 阻塞 页 面 DOM 的 构建 ， 甚 至 在 某 些 浏览 器 中 , 一 些 需 
下 载 的 组 件 也 会 被 阻塞 。 将 <script> 移 动 到 页 面 底部 可 以 确保 它 不 会 形成 阻塞 ，} 
段 JavaScript 被 载 入 后 只 会 增强 这 个 基本 功能 已 经 完整 的 页 面 。 
另 一 种 防止 外 部 JavaScript 文件 阻塞 页 面 的 方法 是 将 它们 异步 载 入 页 面 。 这 么 做 的 话 ， 
我 们 就 可 以 早 一 些 开始 载 入 它们 。HTMLS5 为 此 提供 了 defer 属性 : 


这 烟 并 


<script defer src=”behaviors.js”></script> 


不 幸 的 是 ,老式 浏览 器 并 不 支持 defer 属性 。 但 还 好 我 们 有 另 一 种 跨 浏览 器 的 方法 来 
解决 这 一 问题 , 并 且 这 种 方式 新 老 浏览 器 都 能 接受 。 这 种 方式 就 是 动态 创建 script 节点 ， 
然后 将 它 插 入 DOM 。 换 名 话说 ， 我 们 需要 使 用 一 些 内 联 JavaScript 代码 来 载 入 外 部 
JavaScript 文件 。 这 段 代 码 可 以 放 在 文档 的 顶部 ， 这 样 一 来 外 部 JavaScript 文件 就 会 早 一 些 
被 载 入 : 


<head> 


(function () { 
Var s = document.createElement('script"'); 
Ss.src = 'behaviors.js'; 


document .getElementsByTagName ('head') [0] .appendChild(s); 
} ()); 
</head> 


8.1.2 ”命名 空间 


为 了 减少 命名 冲突 ， 我 们 通常 都 会 尽量 减少 使 用 全 局 变量 的 机 会 。 但 这 并 不 能 根本 解 
决 问 题 ， 更 好 的 办 法 是 将 变量 和 方法 定义 在 不 同 的 命名 空间 中 。 这 种 方法 的 实质 就 是 只 定 
义 一 个 全 局 变量 ， 并 将 其 他 变量 和 方法 定义 为 该 变量 的 属性 。 

8.1.2.1 将 对 象 用 做 命名 空间 

首先 ， 我 们 来 新 建 一 个 全 局 变量 MYAPP: 


// global namespace 
var MYAPP = MYAPP || {}; 
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然后 ， 我 们 为 MYAPP 设置 属性 sevent， 用 它 来 代替 上 一 章 练习 题 中 实现 的 myevent 
全 局 工具 对 象 : 


// sub-object 
MYAPP .event = {1}; 


其 添加 方法 : 


7 
| 


// object together with the method declarations 
MYAPP .event = { 
addListener: function(el, type, fn) { 
// .. do the thing 
}, 
removeListener: function(el, type, fn) { 
VA 
}, 
getEvent: function(e) { 


/i 


// ... other methods or properties 
}; 


8.1.2.2 ”命名 空间 中 的 构造 器 应 用 


我 们 也 可 以 在 命名 空间 中 使 用 构造 器 函数 。 在 本 例 中 ，DOM 工具 本 身 就 定义 了 一 个 
Element 构造 器 ， 通 过 它 我 们 可 以 很 方便 地 创建 DOM 元 素 。 


MYAPP.dqom = {}; 
MYAPP .qdqom.ElLlement = function (type, properties) { 


Var tmp = document.createElement (type); 
for (var i in properties) { 
if (properties.hasOwnProperty(i)) { 
tmp.setAttribute(i, properties[i]); 


} 


return tmp; 


}; 


同样 的 ， 您 也 可 以 用 Text 构造 器 来 创建 文本 类 节点 : 


MYAPP .dom.Text = function (txt)f{ 
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return document.createTextNode (七 xX 七 ) 


}; 
然后 使 用 该 构造 器 在 网 页 底部 创建 一 个 链接 : 


Var link = new MYAPP.dom.Element('a', 

{href: 'nttp://phpied.com', target: ' blank'}); 
Var text = new MYAPP.dom.Text('click me'); 
link.appendChild (text); 
document .body.appendChild (link); 


8.1.2.3 namespace() 方 法 
我 们 可 以 实现 一 个 名 为 namespace 的 工具 方法 , 来 简化 我 们 的 工作 ,其 调用 方法 很 简单 : 


MYAPP .namespace ('dom.style'); 


这 等 价 于 : 


MYAPP .dom = {}; 
MYAPP .dom.style = {}; 


下 面 ， 我 们 来 看 看 这 个 namespace () 方法 是 如 何 实现 的 。 首 先 ， 我 们 创建 一 个 数组 ， 
于 存放 由 “.” 分 割 的 输入 字符 串 ; 然后 将 该 数组 中 的 每 个 元 素 都 添加 为 全 局 对 象 的 属性 。 


Var MYAPP = {}; 
MYAPP .namespace = function (name) { 
Var parts = name.split('.'); 
Var current = MYAPP; 
for (var i = 0; i < parts.lengtn; i++) { 


if (!current[parts[i]]) { 
current [Parts[il] = {}; 

} 

current = current[lparts[i]]; 


} 
}; 


测试 一 下 新 的 方法 ; 


MYAPP .namespace ('event'); 
MYAPP .namespace('dom.style'); 


上 述 代 码 等 价 于 以 下 调用 : 


第 8 章 ”编程 模式 与 设计 模式 ”281 


Var MYAPP = { 
event: {}, 
dom: { 

style: {} 


8.1.3 初始 化 分 支 


我 们 在 上 一 章 曾经 提 到 过 ， 不 同 的 浏览 器 对 于 相同 或 相似 的 方法 可 能 有 不 同 的 实现 。 
这 时 ， 您 需要 依据 当前 的 浏览 器 的 支持 方式 来 选择 对 应 的 执行 分 文 。 这 类 分 支 可 能 有 很 多 ， 
因而 可 能 会 减缓 脚本 执行 速度 。 
但 非 要 等 到 运行 时 才能 分 支 吗 ? 我 们 完全 可 以 在 加 载 脚本 时 ， 在 模块 初始 化 的 过 程 中 
就 将 部 分 代码 进行 分 支 处 理 。 这 显然 更 有 利于 提高 效率 。 利 用 JavaScript 代码 可 以 动态 定 
义 的 特性 ， 我 们 可 以 为 不 同 的 浏览 器 定制 不 同 的 实现 方法 。 下 面 我 们 来 看 一 个 具体 示例 。 

首先 ， 我 们 定义 一 个 命名 空间 并 声明 了 一 些 事件 处 理 方法 。 


Var MYAPP = {}; 

MYAPP .event = { 
addListener: null, 
removeListener: null 


jz 


注意 ， 此 时 无 论 是 添加 还 是 删除 事件 监听 的 方法 都 还 没有 被 定义 ， 它 们 将 根据 具体 的 
浏览 器 特性 探测 的 结果 ， 被 赋予 不 同 的 实现 。 


if (window.addEventListener) 1{ 
MYAPP .event .addListener = function(el, type, fn) { 
el.addEventListener (type, fn, false); 


}; 
MYAPP .event.removeListener = functionl(el, type, fn) { 


1.removeEventListener (type, fn, false); 


}; 
} else if (document.a 
MYAPP .event .addLi 
el.attachEven 


tachEvent){ // IE 


tener = function(el, type, fn) { 


[vs RN 


('on' + type, fn); 
}; 
MYAPP .event.removeListener = functionl(el, type, fn) { 


el.detachEvent('on' + type, fn); 


}; 
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} else { // older browsers 
MYAPP .event .addListener = functionl(el, type, fn) { 


el['on' + type] = fn; 

}; 

MYAPP .event.removeListener = functionl(el, type, fn) { 
el[l'on' + type] = nulil; 


}; 
} 


一 旦 上 述 脚 本 被 执行 ， 我们 就 定义 了 与 浏览 器 特性 相关 的 adgListener() 和 
removeListener () 方 法 。 如 此 ， 当 它们 再 次 被 调用 时 ， 就 不 需要 再 探测 浏览 器 特性 了 
脚本 会 执行 得 更 快 。 


要 提醒 的 是 ， 在 检查 浏览 器 特性 时 ， 请 尽量 不 要 对 一 个 特性 做 过 多 的 假设 。 在 上 例 
中 ， 我 们 就 没有 遵从 这 一 原则 。 因 为 我 们 只 检查 了 浏览 器 对 addEventListener 方法 
的 支持 ， 然 后 就 直接 定义 了 相应 的 adqdListener() 和 removeListener () 方 法 。 在 这 
个 例子 中 ， 我 们 合理 地 假设 一 个 浏览 器 如 果实 现 了 addEventListener ()， 那 么 它 当 然 
也 会 同时 实现 removeEventListener () 方 法 。 但 请 想象 一 下 ， 如 果 浏 览 器 只 实现 了 
stopPropagation()， 却 没有 实现 preventDefault () 方 法 ， 而 我 们 又 没有 对 它们 分 
别 检 测 ， 会 导致 什么 后 果 ? 另 一 方面 ， 我 们 很 可 能 在 发 现 adqdEventListener () 方 法 没 
有 被 定义 后 , 想当然 地 认为 这 个 浏览 器 肯定 是 低 版 本 的 正 , 结果 又 导致 我 们 必须 为 下 浏览 
器 编写 专用 的 处 理 函 数 。 请 记 住 ， 这 些 代码 可 能 会 在 目前 下 中 正常 工作 , 但 不 等 于 今后 的 
版 本 也 一 样 。 为 了 避免 自 定义 函数 在 新 版 本 浏览 器 可 能 会 增加 的 功能 ， 我 们 应 该 单独 检测 
每 个 可 能 会 用 到 的 浏览 器 特性 ， 千 万 不 要 只 做 一 些 泛泛 的 假设 。 


8.1.4 惰性 初始 


惰性 初始 模式 与 上 面 的 初始 化 分 支 模 式 很 相似 。 不 同 之 处 在 于 ， 该 模式 下 的 分 支 只 有 
在 相关 函数 第 一 次 被 调用 时 才 会 发 生 即 只 有 函数 被 调用 时 ， 它 才 会 以 最 佳 实现 改写 自 
己 。 在 初始 化 分 支 模式 中 ， 模 块 初始 化 时 if 分支 必然 会 发 生 ， 而 在 惰性 初始 模式 中 ， 这 
可 能 根本 就 不 会 发 生 一 一 因为 某 些 函 数 可 能 永远 不 会 被 调用 。 同 时 ， 人 惰性 初始 模式 也 会 使 
得 初始 化 过 程 更 为 轻 量 ， 因 为 不 需要 再 做 分 支 检 测 。 

接 下 来 ， 我 们 通过 一 个 adqdListener () 方 法 定义 来 演示 一 下 这 个 模式 。 该 方法 将 以 
泛 型 的 方式 来 实现 一 一 即 在 它 第 一 次 被 调用 时 ， 首 先 会 检查 浏览 器 支持 的 功能 ， 然 后 为 自 
己 选择 最 合适 的 实现 ， 最 后 调用 自身 以 完成 真正 的 事件 添加 。 当 下 一 次 再 调用 该 方法 时 ， 
就 会 直接 调用 它 选择 的 新 方法 而 不 再 需要 做 分 支 判 断 。 作 为 例子 ， 实 现 如 下 : 


En 
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Var MYAPP = {}; 
MYAPP .myevent = { 
addListener: functionl(el, type, fn) { 
if (el.addEventListener) { 
MYAPP .myevent .addListener = function(el, type, fn) { 
el.addEventListener (type, fn, false); 
}; 
} else if (el.attachEvent) { 
MYAPP .myevent .addListener = function(el, type, fn) { 
el.attachEvent('on' + type, fn); 
}; 
} else { 
MYAPP .myevent .addListener = function(el, type, fn) { 
el['on' + type] = fn; 
}; 
} 
MYAPP .myevent .addListener (el, type, fn); 


} 
} 


8.1.5 配置 对 象 


该 模式 往往 适 
都 不 一 样 ， 但 
因 


为 我 们 不 太 容易 记 住 这 些 参 数 的 顺序 ， 尤 其 


人 | 


于 有 很 多 个 参数 的 函数 或 方法 。 但 关 了 
般 来 说 ， 当 一 个 函数 的 参数 多 于 三 个 时 ， 使 用 起 来 就 多 少 会 有 些 不 太 方便 ， 
是 当 其 中 还 有 默认 参数 存在 的 时 候 。 


“很 多 ”的 理解 ， 每 个 人 可 


CC 


日 
5 


但 我 们 可 以 用 对 象 来 代替 多 个 参数 。 也 就 是 说 ,让 这 些 参数 都 成 为 某 一 个 对 象 的 属性 。 


这 在 面 对 一 些 配置 型 参数 时 会 显得 尤为 适合 ， 因 


之 ， 用 单个 对 象 来 蔡 代 多 个 参数 有 以 下 几 点 优势 : 


令 不 用 考虑 参数 的 顺序 。 

多 可 以 跳 过 某 些 参数 的 设置 。 

令 ”函数 的 扩展 性 更 强 ， 可 以 适应 将 来 的 扩展 需要 。 
多 代码 的 可 读 性 更 好 ， 因 


的 构造 器 , 通过 调 月 


为 在 代码 中 我 们 看 到 的 是 配置 对 象 的 属 
下 面 , 假设 我 们 有 一 个 UI 组件 


为 它们 中 往往 存在 多 个 缺 省 参数 。 简 而 言 


于 


性 名 称 。 


i 


支 构 造 器 就 可 以 创建 好 看 的 按钮 。 


它 的 参数 包括 一 段 文 本 ， 即 按钮 的 显示 内 容 (<input> 标 签 的 value 属性 )， 和 一 个 可 


缺 省 的 type 参数 。 


第 


// a constructor that creates buttons 


一 步 ， 我 们 先 从 一 个 常规 的 按钮 开始 。 代 码 如 下 : 
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MYAPP .qdqom.EFancyButton = function (text, type) { 
Var b = document.createElement ('input'); 


b.type = type || 'submit'; 
b.value = text; 
return b; 


}; 


该 构造 器 很 简单 ， 只 需要 传递 给 它 一 个 字符 串 , 然后 就 可 以 把 新 创建 的 按钮 加 入 文档 : 


document .body.appendChildl( 


new MYAPP.dom.FancyButton('puuush') 


到 目前 位 置 一 切 看 起 来 都 很 好 ， 但 接 下 来 ， 我 们 需要 为 按钮 设置 更 多 属性 ， 例 如 颜色 

和 字体 。 结 果 ， 这 个 构造 器 的 定义 最 终 就 可 能 会 变 成 这 样 ; 
MYAPP .qdqom.EancyButton = 

function(text, type, color, border, font) { 


// 
} 


这 显然 就 不 太 方便 了 ， 比 如 当 我 们 可 能 只 想 设置 第 三 个 和 第 五 个 参数 ， 而 跳 过 第 二 个 
和 第 四 个 时 ， 就 必须 这 样 : 


I 


new MYAPP .dom.FancyButton\ 
'puuush', null, 'white', null,'Arial'); 


这 时 候 ， 更 好 的 选择 就 是 用 一 个 可 配置 对 象 参数 来 代替 所 有 的 参数 配置 ， 这 样 一 来 ， 
函数 定义 看 起 来 就 可 能 是 这 样 : 


MYAPP .dqom.EFancyButton = function(text, conf) { 


Var type = conf.type || 'submit"'; 
Var font = conf.font || 'Verdana'; 
// 

} 

其 使 用 方法 如 下 : 

var config = { 
font: 'Arial, Verdana, sans-serif', 


color: 'white' 
}; 
new MYAPP .dom.FancyButton('puuush', config); 


另 一 个 例子 : 


document.body.appendChildl( 
new MYAPP .dom.FancyButton('dude', {color: 


); 


如 您 所 见 ， 我 们 可 以 方便 地 设置 部 分 参数 ， 


于 我 们 是 通过 名 字 来 设置 参数 的 ， 因 此 代码 也 显得 更 易 读 、 更 友好 。 
这 一 优点 同时 也 是 此 模式 的 一 大 缺点 ， 它 有 可 能 导致 对 此 模式 的 小 
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并 可 以 随意 改变 参数 设置 的 顺序 。 同 时 ， 


昌 。 设 计 者 可 能 


会 以 此 为 借口 ， 不 加 甄别 地 乱 添加 参数 ， 而 其 中 某 些 参数 不 完全 是 默认 的 ， 某 些 又 依赖 


于 其 他 参数 。 


作为 一 个 经 验 法 则 ， 这 些 参 数 都 应 该 是 独立 且 可 选 的。 如 果 在 函数 中 ， 我 们 必须 为 这 


些 参数 的 组 合 检查 各 种 可 能 性 (“ 嘎 ，A 参数 被 设置 了 ， 但 A 参数 只 


在 B 参数 被 设置 时 


才 有 效 ”)， 那 么 这 种 方法 就 可 能 导致 函数 体 过 于 爱 肿 ， 难 以 维护 与 测试 ， 因 为 其 可 能 的 组 


合 太 多 了 。 


8.1.6 ”私有 属性 和 方法 


在 JavaScript 中 ， 我 们 没有 可 以 用 于 设置 对 象 属 
常 有 以 下 访问 修饰 符 : 


S public 


局 


访问 权限 的 修饰 符 。 


对 象 的 属性 (或 方法 ) 可 以 被 所 有 人 访问 。 
令 private 一 一 只 有 对 象 自己 可 以 访问 这 些 属 
些 属性 。 


令 protected 一 一 仅 该 对 象 或 其 继承 者 才能 访问 这 
尽管 JavaScript 中 没有 特殊 的 语法 来 标记 私有 属性 ， 但 是 根据 第 3 章 : 


以 在 构造 器 中 通过 使 用 局 部 变量 和 函数 的 方式 来 实现 类 似 的 权限 控制 。 
Button 构造 器 为 例 ， 我 们 为 它 定 义 了 一 个 
还 定义 了 一 个 setStyles () 的 
法 对 于 构造 器 之 外 的 代码 来 说 是 不 可 见 的 。 下 面 ， 我 们 将 为 您 演示 Fancy 
如 何 使 用 这 些 局 部 的 私有 属性 的 : 


下 面 继 续 以 FEancCyY] 
于 表示 所 有 的 默认 样式 参数 ， 并 


Var MYAPP 


雪 二 中 


MYAPP.dom = {}; 
MYAPP .dom.FancyButton = function(text, conf) 
var styles = { 


forits 


'Verdana', 


border: 'lpx solid black', 


{ 


Lm 


styles 局 部 变量 ， 用 
局 部 方法 。 该 变量 和 方 


但 一 般 语 言 通 


函数 ， 我 们 可 


Button 对 象 是 
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证 间 二 四 "BLaclk:, 
background: 'grey' 
}; 
function setStyles (pb) { 
var i; 
for (i in styles) { 
if (styles.hasOwnProperty(i)) { 
b.style[i] = conf[i] || styles[i]; 
} 
} 
} 


conf = conf || {}; 


Var b = document.createElement ('input'); 


b.type = conf.type || 'submit'; 
b.value = text; 

setStyles (b); 

return b; 


}; 


在 这 上 段 代 码 中 ，styles 是 一 个 私有 属性 ， 而 setstyles () 则 是 一 个 私有 方法 。 构 
造 器 可 以 在 内 部 调用 它们 (它们 也 可 以 访问 构造 器 中 的 任何 对 象 ), 但 它们 却 不 能 被 外 部 代 
码 所 调用 。 


8.1.7 ”特权 函数 


特权 函数 (这 个 概念 是 由 Douglas Crockford 提出 的 ) 实际 上 只 是 一 些 普通 的 公共 函数 ， 
但 它们 却 可 以 访问 对 象 的 私有 方法 或 属性 。 其 作用 就 像 一 座 桥 粱 ， 将 私有 特性 以 一 种 可 控 
的 方式 暴露 给 外 部 使 用 者 。 


8.1.8 ”私有 国 数 的 公有 化 


假设 我 们 定义 了 一 个 函数 ， 但 并 不 想 让 外 界 修改 它 ， 于 是 将 其 设 为 私有 。 但 有 时 候 我 
们 又 希望 让 某 些 外 部 代码 能 访问 到 它 ， 这 该 如 何 实现 呢 ? 解决 方案 是 将 这 个 私有 函数 赋值 


-到 屋 性 
给 一 个 公有 属性 。 


下 面 ， 我 们 将 _setStyle () 和 _getStyle() 定义 为 私有 方法 ， 但 同时 又 将 它们 分 别 
赋值 给 公有 方法 setStyle () 和 getstyle(): 


Var MYAPP = {}; 
MYAPP.dom = (function()f{ 


第 8 章 ”编程 模式 与 设计 模式 287 


Var setStyle = function(elLl，prop，value) { 
console.log('setstyle'); 
}; 
Var getStyle = function(el, prop) { 
console.log('getSstyle'); 
}; 
return { 
setStyle: _setstyle, 
getSstyle: getstyle, 
yetAnother: setStyl 


} 0); 


在 这 种 情况 下 ， 当 MYAPP .dom.setStyle() 被 调用 时 ，_setStyle() 也 会 被 调用 
也 可 以 在 外 面 改写 setStyles () 方法 : 


o 


MYAPP .dom.setStyle = function() {alert ('b');}; 


令 MYAPP.dom.setStyle 指向 的 是 新 的 方法 ; 


令 MYAPP.dom.yetAnother 仍然 指向 setStyle () ; 

令 _setSstyle() 方 法 随时 可 以 被 内 部 的 代码 调用 。 

当 我 们 暴露 私有 方法 与 属性 时 ， 请 记 住 ， 对 象 ( 函 数 及 数组 也 是 对 象 》 传 递 的 方式 为 
引用 传递 ， 所 以 对 象 可 以 从 外 部 被 修改 。 
8.1.9 即时 函数 


男 一 个 保证 全 局 命名 空间 不 被 污染 的 模式 是 , 把 代码 封装 在 一 个 匿名 函数 中 并 立即 
调用 。 如 此 一 来 ， 该 函数 中 的 所 有 变量 都 是 局 部 的 (假设 我 们 使 用 了 var 关键 字 )， 并 
在 函数 返回 时 被 销毁 《前 提 是 它们 不 属于 闭 包 )。 本 书 第 3 章 : 函数 已 经 详细 讨论 过 该 
模式 。 


(function () { 
// code goes here... 


} 0); 


该 模式 特别 适用 于 某 些 脚本 加 载 时 所 执行 的 一 次 性 初始 化 任务 。 
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即时 函数 也 可 用 于 创建 和 返回 对 象 。 如 果 我 们 创建 对 象 的 过 程 很 复杂 ， 并 且 需 要 做 一 
些 初始 化 工作 ， 那 么 我 们 就 可 以 把 第 一 部 分 相关 的 初始 化 工作 设置 为 一 个 即时 函数 ， 然 后 
通过 它 来 返回 一 个 对 象 一 一 它 可 以 访问 初始 化 部 分 定义 的 任何 私有 属性 。 


var MYAPP = {}; 
MYAPP.dom = (function () { 
// initialization code... 
function private() { 
A Bs 
} 
return { 
getSstyle: function (el, prop) { 
console.log('getstyle'); 
_private(); 
}, 
setStyle: function (el, prop, value) { 
console.log('setSstyle'); 
} 


} (00); 


8.1.10 ”模块 


综合 上 述 几 个 模式 ， 我 们 可 以 获得 一 个 新 的 模式 ， 这 个 模式 通常 被 称 为 模块 模式 。 在 
编程 中 ， 模 块 的 概念 帮助 我 们 管理 代码 片段 与 库 ， 并 且 在 需要 的 时 候 引 入 它们 ， 就 像 玩 拼 
图 游戏 一 样 。 


扩展 阅读 
JavaScript 暂时 还 没有 内 建 的 模块 机 制 。 不 过 ， 未 
> 来 可 能 会 通过 export 与 import 关键 字 来 声明 模块 。 另 
SN 外 ,CommonJS 也 有 一 套 模 块 声明 规则 , 它 通过 require() 
函数 和 exports 对 象 来 声明 与 调用 模块 。 具 体 请 参考 


http://www. commonjs.org。 


模块 模式 包括 以 下 几 个 部 分 。 
令 命名 空间 : 用 于 减少 模块 之 间 的 命名 冲突 。 
令 ”即时 浮 数 ， 用 于 提供 私有 作用 域 以 及 初始 化 操作 。 
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令 ” 私 有 属性 与 方法 。 
令 作为 返回 值 的 对 象 : 该 对 象 作为 模块 提供 公共 API。 例 如 : 


namespace ('MYAPP .module.amazing'); 


MYAPP.module.amazing = (function () { 


// short names for dependencies 
Var another = MYAPP.module.another; 


// local/private variables 
本 


// private functions 
function hidden() {} 


// public API 
return { 
hi EUnet lon (}. 1{ 
return "hello"; 


10); 
使 用 方式 : 


MYAPP .module.amazing.hi(); // "hello" 
8.1.11 链 式 调用 


通过 链 式 调用 模式 ， 我 们 可 以 在 单行 代码 中 一 次 性 调用 多 个 方法 ， 就 好 像 它们 被 链接 在 
了 一 起 。 当 我 们 需要 连续 调用 若干 个 彼此 相关 的 方法 时 ， 会 带 来 很 大 的 方便 。 实 际 上 ， 我 们 
就 是 通过 前 一 个 方法 的 结果 《〈 即 返回 对 象 ) 来 调用 下 一 个 方法 的 ， 因 此 不 需要 中 间 变 量 

通常 情况 下 ， 任 何 一 个 新 建 的 构造 器 都 能 立即 作用 到 某 个 DOM 元 素 上 去 ， 例 如 在 接 
下 来 的 代码 中 ， 我 们 用 构造 器 新 建 了 一 个 <span> 元 素 ， 然 后 将 其 添加 到 <body> 元 素 中 : 

Var obj = new MYAPP.dom.Element ('span'); 

obj .setText ('hello'); 

ob]j .setStyle('rcolor'，r"red' ) ; 


obj.setSstyle('font', 'Verdana'); 
document .body.appendChild (obj); 


o 


我 们 已 经 知道 , 构造 器 返回 的 是 新 建 对 象 的 this 指针 。 同 样 的 , 我 们 也 可 以 让 setText () 
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和 setStyle () 方 法 返回 this， 这 样 ， 我 们 就 可 以 直接 用 这 些 方法 所 返回 的 实例 来 调用 
其 他 方法 ， ， 的 链 式 调用 : 


Var obj = new MYAPP.dom.Element ('span'); 
obj .setText ('hello') 
.SetSstyle('color', 'red') 


.Setstyle('font', 'Verdana'); 
document.body.appendChild (obj); 


实际 上 ， 我 们 甚至 不 需要 定义 obj 变量 ， 如 果 在 新 对 象 被 添加 到 DOM 树 之 后 就 不 再 
需要 访问 它 的 话 。 那 么 我 们 可 以 这 样 写 : 


document.body.appendChildl( 
new MYAPP .dom.Element ('span') 
.SetText ('hello') 
.SetSstyle('color', 'red') 
.SetSstyle('font', 'Verdana') 
); 


此 模式 的 缺点 之 一 是 ， 由 于 所 有 的 调用 都 在 同一 行 ， 一 旦 调用 中 出 错 ， 就 会 为 调试 带 
来 一 点 困难 ， 因 为 一 般 报 错 只 会 告诉 我 们 在 第 几 行 ， 而 我 们 无 法 从 中 得 知 错误 出 现在 链 式 
调用 中 的 哪 一 环 。 


8.1.12 JSON 


在 编程 模式 这 一 节 末 尾 ， 我 们 来 简单 介绍 一 下 JSON。 从 技术 上 说 ，JSON 本 身 不 能 算 
编程 模式 ， 但 可 以 说 ，JSON 的 使 用 确实 是 一 种 很 有 用 的 模式 。 

JSON 本 身 实 际 上 是 一 种 轻 量 级 的 数据 交换 格式 。 当 使 用 XMLHttpRequest () 接收 服 
务 器 端的 数据 时 ， 通 常 使 用 的 就 是 JSON 而 不 是 XML。JSON 是 JavaScript Object Notation 
的 缩写 , 它 除了 使 用 极为 方便 之 外 , 没有 什么 特别 的 。JSON 格式 由 对 象 和 数组 标记 的 数据 
构成 。 下 面 是 JSON 字符 串 的 一 个 例子 ， 来 自 服务 器 响应 的 XHR 请 求 : 


'name': 'Stoyan', 

'family': 'Stefanov', 

"pooks': ['OOJS', ‘JSPatterns', "JS4PHP'] 
} 


与 其 相对 应 的 XML 应 该 如 下 : 


第 8 章 ”编程 模式 与 设计 模式 291 


<?xml version="1.1" encoding="iso-8859-1"?> 


<response> 
<name>Stoyan</name> 
<family>Stefanov</family> 
<books> 
<book>00JS</book> 
<book>JSPatterns</book> 
<book>JS4PHP</book> 
</books> 
</response> 


首先 ,我 们 可 以 看 到 JSON 是 多 么 轻 量 , 它 只 用 了 很 少 的 字 节 来 表示 数据 ,但 使 用 JSON 
的 最 大 好 处 是 ，JavaScript 可 以 很 容易 地 处 理 它 。 假 设 我 们 发 送 了 一 个 XHR 请 求 并 得 到 了 
一 个 JSON 字符 串 ， 它 保存 在 XHR 的 responseText 属性 中 ， 然 后 ， 我 们 调用 eval () 
将 该 字符 串 转换 为 JavaScript 对 象 : 


// warning: counter-example 


Var response = eval('(' + xhr.responseText + ')'); 


接着 ， 我 们 就 可 以 通过 obj 的 属性 来 访问 这 些 数据 了 : 


Console logl(reponse.name); // "Stoyan" 
Console log (reponse.books[2]); // "JS4PHP" 


由 于 eval () 有 安全 隐患 问题 ， 所 以 最 好 使 用 JSON 对 象 来 处 理 JSON 数据 (对 于 没有 
JSON 对 象 的 老式 浏览 器 ， 可 以 使 用 外 部 库 : http://json.org/)， 这 样 做 也 很 方便 : 


Var response = JSON .Parse (xhr.responseText); 


正 因 为 JSON 简洁 的 特点 ， 它 很 快 成 为 一 种 流行 的 、 与 语言 无 关 的 数据 交换 格式 。 我 
们 可 以 很 容易 地 在 服务 器 端 使 用 喜欢 的 语言 创建 JSON 对 象 ， 例 如 ， 可 以 用 PHP 提供 的 
json_encode () 方 法 将 PHP 数组 序列 化 为 JSON 字符 串 ， 再 用 json_decode () 方法 还 原 
PHP 数组 。 


反 向 将 对 象 转换 为 SON 字符 串 ， 采 用 


Stringify ( ) 方法 : 
Var Str = JSON.stringify({hello:"you"}); 


I 
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8.2 ”设计 模式 


在 本 章 第 二 部 分 中 ， 我 们 将 为 您 
面向 对 象 软件 的 基础 》 一 书 中 介绍 的 部 分 设计 模式 。 该 书 很 有 影响 力 ， 通 常 也 被 称 为 Book 
of Four， 或 者 Gang of Four 或 GoF〈 代 表 该 书 的 四 位 作者 )。 这 本 书 中 所 涉及 的 模式 大 致 上 


可 以 分 为 3 组 。 


介绍 如 何 使 用 


令 ”创建 型 模式 涉及 对 象 的 创建 与 初始 化 。 
令 ”结构 型 模式 ， 描述 了 如 何 组 合 对 象 以 提供 新 的 功能 。 
信行 为 型 模式 ， 描述 了 对 象 之 间 如 何 通信 。 


GoF Wa tk 介 


我 们 只 介绍 其 


绍 了 23 个 模式 , 自 此 


FP 的 四 个 ， 并 通过 一 些 


JavaScript 来 演绎 《设计 模式 : 可 复 用 


书 发 行 以 来 , 人 们 又 发 现 了 更 多 的 模式 。 在 这 本 书 中 ， 
L 体 JavaScript 的 实例 加 以 说 明 。 请 记 住 ， 提 到 模式 ， 


我 们 更 关注 的 是 它们 接口 及 关系 ， 而 不 是 内 部 的 实现 细节 。 一 旦 您 掌握 了 一 种 设计 模式 ， 


实现 起 来 很 容易 ， 尤 其 对 


下 面 是 我 们 将 要 介绍 的 模式 : 


单 件 模式 ; 


观察 者 模式 。 


4 
4 
4 装饰 器 模式 
4 
1 


单 件 模式 1 


单 件 是 一 个 创建 型 的 设计 模式 ， 它 主要 考虑 的 是 创建 对 象 的 方式 。 当 我 们 需要 创建 一 


于 JavaScript 这 样 的 动态 语言 来 说 。 


' 类 型 或 一 个 类 的 唯 
只 能 被 创建 一 个 实例 对 象 ， 如果 之 后 


但 由 于 JavaScript 本 身 没 有 类 的 


每 个 对 象 都 是 一 个 单 件 。 
JavaScript 中 最 基本 的 单 件 模式 实现 是 使 用 对 象 文 本 标识 法 : 


降 念 ， 所 以 单位 


对 象 时 ， 就 可 以 使 用 该 模式 。 在 一 般 的 语言 中 ， 这 意味 着 这 一 个 类 
下 党 试 创 建 该 对 象 的 话 ， 代 码 就 只 会 返回 原来 的 实例 。 


成 为 了 默认 行为 ， 也 是 最 自然 的 模式 。 


var single = {}; 
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很 简单 ， 不 是 吗 ? 
8.2.2” 单 件 模式 2 


但 当 我 们 想 用 类 似 于 类 的 语法 来 实现 单 件 模式 时 ， 事 情 就 会 变 得 更 有 趣 一 些 。 例 如 ， 
假设 我 们 有 一 个 叫做 Logger () 的 构造 器 ， 而 我 们 想 这 么 使 用 它 : 


Var my 1og = new Logger (); 


my_log.log('some event'); 


// ... 1000 lines of code later in a different scope... 


Var other log = new Logger(); 
other log.log('some new event'); 
console.log (other log === my 10g); // true 


这 段 代码 所 要 表达 的 意思 是 ， 尽 管 这 里 多 次 使 用 了 new， 但 实际 上 所 创建 的 对 象 实例 
却 始终 只 有 一 个 ， 后 续 的 构造 器 调用 过 程 中 所 返回 的 始终 是 同一 个 对 象 。 这 是 怎么 做 到 
的 呢 ? 


8.2.2.1 全 局 变量 


解决 方案 之 一 是 用 全 局 变量 来 保存 这 个 唯一 的 实例 。 在 这 种 情况 下 ， 我 们 的 构造 器 看 
起 来 像 这 样 : 
function Logger() { 
if (typeof global log === "undefined") { 


global log = this; 
} 
return global log; 
} 


使 用 这 个 构造 器 将 达到 预期 的 结果 : 


Var a = new Logger () 


Var b = new Logger () 


console.log(a === b); // true 


但 这 样 做 的 缺陷 也 正 是 使 用 了 全 局 变量 ， 它 在 任何 时 候 都 有 可 能 被 覆盖 掉 ， 从 而 导致 
实例 丢失 。 反 之 亦 然 ， 全 局 变量 也 随时 有 可 能 履 盖 掉 别 的 对 象 。 
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8.2.2.2 ”构造 器 属性 


一 实例 设置 为 构造 器 本 身 的 属性 。 


function Logger() { 

if (!Logger.single instance) { 
Logger.single instance = this; 
} 


return 


} 


Logger.single instance; 


在 这 种 情况 下 ， 当 我 们 调 


4 


的 Logger.single _instance 属性 。 接 下 来 如 果 我 们 


正如 我 们 所 知道 的 ， 函 数 也 是 一 种 对 象 ， 本 身 也 有 属性 。 


因 


了 调 


此 ， 我 们 也 可 以 将 这 个 唯 


new Logger () 语句 时 ，a 就 会 指向 一 个 新 建 


jvar b= new Logger() 


语句 ， 得 到 的 b 将 会 指向 同一 个 Logger.single instance 属性 。 这 正 是 我 们 想 要 的 


结果 。 
上 述 方法 很 显然 解决 了 全 局 变量 所 带 来 的 问题 ， 
缺陷 是 Logger 构造 器 的 属性 是 公有 的 ， 因 


此 它 随时 有 可 能 会 被 覆 


因为 没有 全 


局 变量 被 创建 。 它 的 唯一 
盖 ， 如 此 一 来 ， 这 个 唯一 


实例 可 能 会 被 丢失 或 被 修改 。 上 述 方法 很 显然 解决 
唯一 的 缺陷 是 Logger 构造 器 的 属性 是 公开 
覆盖 的 可 能 ， 如 此 一 来 ， 这 个 单 实例 就 有 可 能 会 被 丢失 或 被 修改 。 当 然 ， 我 们 也 只 能 为 之 
己 的 脚 的 程序 员 保 护 到 这 一 步 了 。 
性 动手 脚 ， 也 就 一 样 可 以 对 Logger 的 构造 器 动手 脚 。 


已 


们 没有 创建 全 局 变量 。 


后 那些 搬 起 石头 打 自 


8.2.2.3 ”使 用 私有 属性 


全 局 命名 空间 所 带 来 的 问题 ， 


因为 我 


Cis 
毕竟 ， 


如 果 有 人 可 以 对 该 单 实例 属 


可 见 的 ， 因 此 随时 有 被 


后 


上 述 问题 的 解决 方案 是 使 用 私有 属性 。 我 们 已 经 


作为 一 个 练习 ， 请 用 此 方法 实现 单 件 模式 。 


8.2.3 工厂 模式 


知道 如 何 使 


j 闭 包 来 保护 一 个 变量 


工厂 模式 也 属于 来 创建 对 象 的 创建 型 模式 。 当 我 们 有 多 个 相似 的 对 象 而 又 不 知道 应 该 


先 使 用 哪 种 时 ， 就 可 以 考虑 使 
既定 规则 ， 自 行 决定 创建 哪 种 类 型 的 对 象 。 


下 面 ， 假 设 我 们 有 三 个 不 


工厂 模式 。 在 该 模式 1 


象 都 将 接受 一 个 URL 类 型 的 参数 ， 但 处 理 细节 稍 


下， 代码 将 会 根据 具体 的 输入 或 其 他 


同 的 构造 器 ， 它 们 所 实现 的 功能 是 相似 的 。 它 们 所 创建 的 对 
有 不 同 。 例如， 它们 分 别 创建 的 是 


小区 
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本 DOM 节点 、 一 个 链接 以 及 一 个 图 像 。 


var MYAPP = {}; 

MYAPP .dom = {}; 

MYAPP .dom.Text = function (url) { 
this.url = url; 
this.insert = function (where) { 


Var txt = document.createTextNode (this.url); 
where.appendCnild (txt); 
}; 
}; 


MYAPP.dom.Link = function (url) { 
thisi dr es UL 
this.insert = function (where) { 


Var link = document.createElement ('a'); 
link.href = this.uril; 
link.appendChild(document .createTextNode (this.ur1l) ) ， 
where.appendChild (link); 
}; 


}; 


MYAPP .dom.Image = function (url) { 


this.url = url; 

this.insert = function (where) { 
Var im = document.createElement ('img'); 
im.src = this.url; 


where.appendCnild (im); 
}; 
}; 


TT 


使 用 三 个 构造 器 的 方法 都 一 样 :设置 url 属性 并 调用 insert () 方法 。 


var url = 'http://www.phpied.com/images/covers/o00js.jpg'; 


Var Oo = new MYAPP.dom.Image (url) 
o.insert (document .body); 


Var Oo = new MYAPP.dom.Link (url); 


o.insert (document .body); 
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但 我 们 预先 并 不 知道 应 该 创建 哪 一 种 对 象 ， 例 如 ， 程 序 需 要 根据 用 户 所 按 的 按钮 来 决 
定 对 象 的 创建 。 假 设 type 中 包含 了 被 创建 对 象 的 类 型 ， 我 们 可 以 用 if 或 者 switch 语 
句 写 出 如 下 代码 : 


Var OO 
if (type === 'Image') { 


oO = new MYAPP.dom.Image(); 


if (type === 'Link') { 
oO = new MYAPP.dom.Link(); 


if (type === "Text') { 

Oo = new MYAPP.dom.Text (url); 
} 
OVE SteEDe ha, 


oO.insett() ， 


这 段 代 码 可 以 工作 ， 但 如 果 构 造 器 很 多 ， 代 码 就 会 很 长 ， 难 以 维护 。 尤 其 当 我 们 是 在 
写 一 个 库 或 框架 时 ， 就 有 可 能 根本 不 知道 构造 器 函数 的 名 字 。 这 时 候 ， 就 应 该 考虑 将 这 种 
动态 创建 对 象 的 操作 委托 给 一 个 工厂 函数 。 


下 面 ， 让 我 们 来 给 MYAPP. dom 工具 添加 一 个 工厂 方法 : 


MYAPP .dom.factory = function(type, url) { 
return new MYAPP.dom[ltypel] (ur1l); 
}; 


然后 我 们 就 可 以 把 上 面 的 三 个 if 蔡 换 掉 了 : 


Var image = MYAPP.dom.factory ("Image", url); 
image.insert (document .body); 


在 这 个 例子 中 ，factory () 方 法 是 很 简单 的 ， 但 在 实际 使 用 中 ， 我们 可 能 需要 对 该 函 
数 的 type 参数 值 进行 相关 的 验证 例如， 检查 MYAPP .dom[type] 是否 存在 )， 并 且 对 
所 有 的 对 象 做 一 些 相同 的 设置 工作 例如， 设置 所 有 构造 器 共用 的 URL )。 


8.2.4 ”装饰 如 模式 


装饰 器 模式 是 一 种 结构 型 模式 ， 它 与 对 象 的 创建 无 关 ， 主 要 考虑 的 是 如 何 拓展 对 象 的 
功能 。 也 就 是 说 ， 除 了 使 用 线性 式 〈 父 一 子 一 孙 ) 继承 方式 之 外 ， 我 们 也 可 以 为 一 个 基础 
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按 不 同 的 顺序 使 用 它们 。 在 不 同 的 程序 中 我 们 可 能 会 面临 不 同 的 需求 ， 并 从 同样 的 装饰 器 


Var obj = { 
doSomething: function () { 
console.log('sure, asap'); 


// 
} 
obj = obj.getDecorator('decol'); 
obj = obj.getDecorator('decol3'); 
obj = obj.getDecorator('deco5'); 


obj .doSsometning(); 


集合 中 选择 不 同 的 子 集 。 在 下 面 的 代码 中 ， 我 们 为 您 演示 了 装饰 器 模式 的 一 种 使 用 方法 : 


这 个 例子 的 开头 使 用 了 一 个 拥有 doSomething () 方 法 的 简 音 对象， 接着， 我 们 通过 


名 字 来 选择 不 同 的 装饰 器 。 这 里 的 每 一 个 装饰 器 都 有 一 个 doSomething () 方 法 一 一 它 


2 


CC 会 


先 调用 前 一 个 装饰 器 的 doSomething () 方法， 然后 再 执行 自己 的 特有 代码 。 每 次 添加 一 
个 装饰 器 时 , 我 们 都 会 履 盖 基础 opj。 最 后 , 选择 完 所 有 装饰 器 后 , 调用 doSsomething () 


方法 ， 它 即 会 顺序 调用 每 个 装饰 器 的 doSsomething () 方 法 。 下 面 ， 我 们 再 来 看 一 个 具体 


的 实例 。 


装饰 一 棵 圣诞 树 


下 面 来 看 一 个 装饰 器 模式 的 实例 : 装饰 一 棵 圣诞树 。 首 先 我 们 来 实现 decorate () 


方法 。 
Var tree = {}; 
tree.decorate = function() { 


alert ('Make sure the tr WONN tt falrle); 
}; 


接着 ， 再 定义 getDecorator () 方 法， 该 方法 用 于 添加 额外 的 装饰 器 。 装 饰 器 被 实 


现 为 构造 器 函数 ， 都 继承 自 tree 对 象 。 


tree.getDecorator = function(dqeco) { 
tree[decol] .prototype = this; 
return new tr [decol]; 


}; 


下 面 来 创建 第 一 个 装饰 器 RedBalls () ， 我 们 将 它 设 为 tree 的 一 个 属性 (以 保持 全 
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局 命名 空间 的 纯净 )。RedBall 对 象 也 提供 了 decorate () 方 法 ， 注 意 它 先 调 
decorate () 方 法 。 


tree.RedBalls = function() { 
this.decorate = function() { 
this.RedBalls.prototype.decorate (); 
alert('Put on some red balls'); 
}; 
}; 


然后 ， 我 们 用 同样 的 方法 来 分 别 添加 BlueBalls () 和 Angel () 装饰 器 : 


tree.BlueBalls = function() { 
this.decorate = function() { 
this.BlueBalls.prototype.decorate () ; 
alert('Add blue balls'); 
}; 
}; 
tree.Angel = function() { 
this.decorate = function() { 
this.Angel.prototype.decorate () ; 
alert ('An angel on the top') 


再 把 所 有 的 装饰 器 都 添加 到 基础 对 象 中 : 


tx = tree.getDecorator('BlueBalls'); 
CE = tree.getDecorator('Angel'); 
全 = tree.getDecorator('RedBalls'); 


最 后 ， 运 行 decorate () 方法 : 


tree.decorate(); 


终 ， 当 我 们 执行 decorate () 方法 时 ， 将 依次 得 到 如 下 警告 信息 : 


Make sure the tree won't fall 


最 
人 
@ Addblue balls 
Anangel onthetop 
4 


Add some red balls 
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由 此 可 见 ， 我 们 可 以 创建 很 多 装饰 器 ， 然 后 按照 需求 选择 和 组 合 它们 。 


8.2.5 观察 者 模式 


观察 者 模式 《有 时 也 称 为 发 布 -订阅 模式 ) 是 一 种 行为 型 模式 ， 
之 间 的 交互 通信 和 问题。 观察 者 模式 中 通常 会 包含 两 类 对 象 。 


令 一 个 或 多 个 发 布 者 对 象 : 当 有 重要 的 事情 发 生 时 ， 会 通知 订阅 者 。 


主要 用 于 处 理 不 同 对 象 


令 一 个 或 多 个 订阅 者 对 象 : 它们 追随 一 个 或 多 个 发 布 者， 监听 它们 的 通知 ， 并 作出 


相应 的 反应 。 


对 观察 者 模式 你 可 能 很 熟悉 。 看 上 去 ， 观 察 者 模式 似乎 与 前 一 章 中 所 讨论 浏览 器 事件 


很 相似 。 确 实 如 此 ， 浏 览 器 事件 正 是 该 模式 的 一 个 典型 应 用 。 浏 览 器 是 发 布 者 : 当 一 个 事 


件 〈 如 onclick) 发 生 时 ， 它 会 发 出 通知 。 事 件 订阅 者 会 监听 这 类 事件 ， 并 在 事件 发 生 时 
被 通知 。 浏 览 器 《发 布 者 ) 为 每 个 订阅 者 发 送 一 个 事件 对 象 ， 但 在 我 们 自己 的 实现 中 ， 大 


可 不 必 使 用 事件 对 象 ， 反 之 ， 可 以 使 用 任何 合适 的 数据 类 型 。 


通知 给 各 个 订阅 者 。 而 拉动 模式 则 要 求 订阅 者 主动 跟踪 发 布 者 的 


通常 来 说 ， 观 察 者 模式 可 分 为 两 类 : 推送 和 拉动 。 推 送 模式 中 是 由 发 布 者 负责 将 消息 


态 变化 。 


下 面 ， 我 们 来 看 一 个 推送 模式 的 实例 。 我 们 把 与 观察 者 相关 的 代码 放 到 一 个 单独 的 对 


象 中 ， 然 后 以 该 对 象 为 一 个 混合 类 ， 将 它 的 功能 加 到 发 布 者 对 和 象 


对 象 都 可 以 成 为 发 布 者 ， 而 任何 一 个 功能 型 对 象 都 可 以 成 为 订阅 者 。 观 察 者 对 象 中 应 该 有 


如 下 属性 和 方法 。 
多 由 回调 函数 构成 的 订阅 者 数组 。 


Ph。 如 此 一 来 ， 任 何 一 个 


令 ”用 于 添加 和 删除 订阅 者 的 addSsubscriber () 和 removeSubscriber () 方 法 。 


令 ” publish() 方 法 ， 授 受 并 传递 数据 给 订阅 者 。 


令 make() 方 法 ， 将 任意 对 象 转变 为 一 个 发 布 者 并 为 其 添加 上 述 方法 。 


以 下 是 一 个 观察 者 对 象 的 实现 代码 ， 其 中 包含 了 订阅 相关 的 方法 ， 并 可 以 将 任意 对 象 


转变 为 发 布 者 。 


Var observer = { 
addSubscriber: function (callback) { 
if (typeof callback === "function") { 


this.subscribers[lthis.subscribers.lengthn] = callback; 


} 
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}, 
removeSubscriber: function (callback) { 
for (var i = 0; i < this.subscribers.length; i++) { 
if (this.subscripbers[i] === callback) { 


delete this.subscribers[i]; 


} 
}, 
publish: function (what) { 
for (var i = 0; i < this.subscribers.length; i++) { 
if (typeof this.subscribers[i] === 'function') { 
this.subscribers[i] (what) ， 


} 
}, 
make: function (o) { // turns an object into a publisher 
for (var i in this) { 
if (this.hasOwnProperty(i)) { 
o[i] = this[i]; 
oOo.subscribers = []; 


} 
}; 


接 下 来 ， 我 们 来 创建 一 些 订 阅 者 。 订 阅 者 可 以 是 任意 对 象 ， 它 们 的 唯一 职责 是 在 某 些 
重要 事件 发 生 时 调用 Publish () 方法。 下 面 是 一 个 blogger 对 象 , 每 当 新 博客 准备 好 时 ， 
就 会 调用 pub1lish () 方法 。 


Var blogger = { 
writeBlogPost: function() { 
Var content = 'Today is ' + new Date(); 
this.publish (content); 
} 
}; 


男 有 一 个 la times 对 象 ， 每 当 新 一 期 的 报刊 出 来 时 ， 就 会 调用 publish() 方 法 。 


var la times = { 
newIssue: function() { 
Var paper = 'Martians have landed on Earth!'; 


this.publish (paper); 
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}; 
它们 都 很 容易 转变 为 发 布 者 : 


observer.make (blogger); 
observer.make (la times); 


与 此 同时 ， 准 备 两 个 简单 对 象 jack 和 ji11: 


Var jack = { 
read: function(what) { 
console.log("I just read that " + what) 
} 
}; 
var jill = { 
gossip: function(what) { 
console.log("You didn't hear it from me, but " + what) 
} 
}; 


中 


他 们 可 以 订阅 plogger 对 象 ， 只 需要 提供 事件 发 生 时 的 回调 函数 。 


blogger .addqSubscripbper (jack.read); 
blogger.addSubscripber (jill.gossip); 


当 blogger 写 了 新 的 博客 时 会 发 生 什么 事 呢 ?结果 就 是 jack 和 ji11l 会 收 到 通知 : 


> blogger .writeBlogPost () ; 
I just read that Today is Fri Jan 04 2013 19:02:12 GMT-0800 (PST) 
You didn't hear it from me, but Today is Fri Jan 04 2013 19:02:12 GMT-0800 (PST) 


任何 时 候 ji11 都 可 以 取消 订阅 。 于 是 当 博 主 写 了 另 一 篇 博客 时 ，jill 就 不 会 再 收 到 通 
知 消息 。 


> blogger.removeSubscriber (jill.gossip); 


> blogger .writeBlogPost () ; 
I just read that Today is Fri Jan 04 2013 19:03:29 GMT-0800 (PST) 


ji 也 可 以 订阅 LATimes， 因 为 一 个 订阅 者 可 以 对 应 多 个 发 布 者 。 


> la times.addSubscriber (jill.gossip); 


如 此 ， 当 LA Times 发 行 新 的 期 刊 后 ，jill 就 会 收 到 通知 并 执行 jill .gossip() 


> la times.newIssue () ， 
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You didn't hear it from me, but Martians have landed on Earth! 


8.3 ”本 章 小 结 


在 本 章 中 ， 我 们 学 习 了 一 些 JavaScript 语言 中 通用 的 编程 模式 ， 了 解 了 如 何 使 程序 简 
洁 \ 干 净 , 运行 得 更 快 , 以 便 能 更 好 地 与 其 他 程序 或 库 工 作 。 然后 我 们 讨论 了 如 何 实现 Book 
of Four 一 书 中 介绍 的 部 分 设计 模式 。 这 些 内 容 充分 证 明了 ，JavaScript 作为 一 门 功能 全 
面 的 语言 ， 可 以 很 容易 地 实现 这 些 经 典 模式 。 设 计 模 式 是 一 个 很 大 的 主题 ， 读 者 可 以 通过 
JSPatterns .com 网 站 与 本 书 著者 进一步 讨论 JavaScript 中 的 模式 。 


附录 A 
保留 字 


在 这 篇 附录 中 ， 我 们 列 出 了 (ES5 ) 所 定义 的 两 个 保留 字 列表 。 
第 一 个 是 当前 所 用 的 保留 字 列 表 ， 第 二 个 则 是 为 将 来 预备 的 保留 字 列 表 。 
另外 ， 这 里 也 收录 了 ES3 中 J 、 但 今后 不 再 是 保留 字 的 单词 列表 。 


保留 字 无 法 被 用 作 变 量 名 : 


var break = 1; // syntax error 
如 果 我 们 需要 在 对 象 属性 中 使 用 这 些 词 ， 就 必须 将 其 用 引号 括 起 来 。 
var o = {break: 1}; // OK inmany browsers, error in IE 
var o's "break™: lj // Always OK 
alert (o.break); // error in IE 
alert (o["break"]); // OK 
naas 留 字 
现役 保留 


这 里 列 出 了 ES5 中 的 现役 保留 字 


break 


catch 


continue 


这 
4 
全 case 
4 
4 
4 


debugger 
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4 


HS SS SS SS SS $$ SS $$ $$ 4 


default 
delete 
do 

else 
finally 
for 
function 
if 

in 
instanceof 
new 
return 
switch 
this 


throw 


void 
while 


with 


预备 保留 字 


这 是 
4 
4 


有 列 出 了 JavaScript 当前 并 没有 使 


class 


const 


]， 而 是 为 后 续 版 本 所 准备 的 保留 字 。 


enum 
export 
extends 
implements 
import 
interface 
et 
package 
private 
protected 
public 
static 


super 


S SS SS $$ SS $$ $b SS 9Y 


yield 


废除 的 保留 字 


中 大 日 忆 
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这 里 列 出 了 在 ES5 中 己 被 废除 的 保留 字 。 


们 作为 变量 名 。 
仿 abstract 
boolean 

byte 


char 


final 


9 

9 

9 

@ double 
9 

@ float 
9 


goto 


但 考虑 到 老式 浏 


JJ 已 用 订 ， 


CT 


最 好 还 是 不 要 使 用 
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924 9Yy 


int 

long 

native 

short 
synchronized 
throws 
transient 


volatile 


附录 B 
内 建 函 数 


在 这 篇 附录 中 ， 我 们 列 出 了 在 这 3 茧 池 效 中 所 讨论 过 的 所 有 内 建 函 数 ( 即 全 
局 对 象 的 方法 列表 ， 如 表 B-1 所 示 )。 


表 B-1 


函数 名 相关 说 明 


该 函数 有 两 个 参数 : 一 个 输入 对 象 及 一 个 进 制 基数 radix。 它 主要 用 
于 将 输入 转换 成 整数 值 并 返回 ， 如 果 转 换 失败 就 返回 NaN。 另 外 ， 
函数 会 忽略 输入 中 所 包含 的 指数 信息 。radix 的 默认 值 为 10( 即 十 进 
制 ), 但 由 于 忽略 该 参数 可 能 会 导致 一 些 不 可 预测 的 结果 (例如 当 您 
输入 08 这 样 的 数值 时 )， 所 以 最 好 还 是 始终 明确 指定 它 的 值 


> parseInt ('10e+37) 
10 


ParseInt () 


> parseInt ('FF'); 
NaN 


> parseInt ('FF', 16); 
255 


该 函数 会 试图 将 其 接受 的 参数 转换 成 浮 点 数值 并 返回 。 它 可 以 处 理 
合 入 中 的 指数 信息 


parseFloat () > parseFloat('l0e+3"'); 
10000 


> parseFloat('123.456test'); 
123.456 
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相关 说 明 


isNaN() 


该 函数 名 是 “Is Not a Number” 的 缩写 ， 它 主要 用 于 判断 其 参数 
是 一 个 有 效 数字 ， 如 果 是 就 返回 true， 否 则 就 ; 
转换 成 数字 


册 
I 
mh 
9 
局 
0 
(0 
洱 条 


外 ， 该 函数 总 是 会 先 尝 试 将 输入 人 
> isNaN (NaN); 
true 


TI 


> isNaN(123); 
false 


> isNaN(parseInt ('FF')); 
true 


> isNaN(parseInt ('FF', 16)); 


false 


isFinite() 


在 该 函数 中 ， 如 果 我 们 的 输入 是 一 个 数字 (或 者 可 以 转换 为 数字 )， 
但 又 不 属于 Infinity 或 -Infinity, 就 返回 true, 否则 就 返回 


false 


> isFinite(le+1000); 
false 


> isFinite(-Infinity); 
false 


> isFinite("™123"); 


true 


encodeURIComponent () 


该 函数 会 将 输入 转换 为 符合 URL 编码 的 字符 串 ， 关 于 这 种 URL 编 
码 的 详细 信息 ， 读 者 可 以 参考 Wikipedia 中 的 相关 文章 : 


http://en.wikipedia.org/wiki/Url encode 


> encodeURIComponent 
('http://phpied.com/'); 
"http%$3A%S2F%2Fphpied.com%2F" 


> encodeURIComponent 
('some script?key=v@lue'); 
"some%20script%3Fkey%3Dv%40lue" 


相关 说 明 
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续 表 


decodeURIComponent () 


该 函数 主要 用 于 解码 其 所 接受 的 URL 编码 字符 惠 


> decodeURIComponent ('%$20%40%20"'); 


TT@" 


encodeURI () 


该 函数 主要 
的 是 一 个 完整 的 URL， 因 此 它 所 编码 的 部 分 不 包括 目标 U 
议 ( 例 如 nttp://) 和 域名 (例如 www.phpied.com) 


HH 


> encodeURI('http://phpied.com/'); 


http://phpied.com/ 


> encodeURI('some script?key=v@lue'); 


"some%20script?key=v@lue" 


于 将 输入 转换 为 URL 编码 ， 但 它 始终 假定 其 所 接受 
RL 的 协 


decodeURI () 


该 函数 主要 用 于 执行 


ncodeURI () 的 反 操作 


> decodeURI ("some®%20script?key=v@1lue"); 


"some script?key=v@lue" 


eval () 


> eval('l + 2°');，} 


> eval('parseInt ("1 


> eval('new Array (ll 


[1, 2, 3] 


> eval('new Array (1 


该 函数 会 执行 其 接收 到 的 JavaScript 代码 串 ， 并 返回 代码 
一 个 表达 式 的 执行 结果 
可 能 的 话 ， 请 尽量 避免 使 用 该 函数 


2 
大 2 3 7 池 
2 


中 最 后 


附录 C 
内 建 对 象 


在 这 篇 附录 中 ,我 们 列 出 了 ECMAScript 标准 中 所 描述 的 所 有 内 建构 造 函 数 ， 


Object () 是 用 于 创建 Object 对 象 的 构造 器 ， 例 如 : 


> var o = new Object(); 


当然 ， 我 们 也 可 以 使 用 对 象 标 识 法 来 实现 同样 的 效果 : 


> var oO = {}; // recommended 


该 构造 器 可 以 接受 任何 类 型 的 参数 ， 并 且 它 会 自动 识别 参数 的 类 型 ， 并 选择 更 合适 的 
构造 器 来 完成 相关 操作 。 例 如 ， 如 果 我 们 传递 给 new Object () 构造 器 的 是 一 个 字符 串 ， 
那么 就 相当 于 调用 了 new String () 构造 器 。 尽管 这 种 做 法 不 值得 推荐 ( 比 起 让 程序 去 猜 ， 
明确 地 声明 会 更 好 )， 但 仍然 是 可 用 的 。 


> var 0 = new Object('something'); 
> o.constructor; 
function String(){[native codel]} 


> Var o = new Object (123) ， 
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> OGONStrtuctory 
function Number() { [native code]} 


语言 中 其 他 所 有 的 对 象 ， 无 论 是 内 建 的 还 是 自 定 义 的 ， 都 继承 于 Object( 见 表 C-1、 
表 C-2)。 因 此 几乎 所 有 的 类 型 都 可 以 调用 Object 的 方法 与 属性 。 


Object 构 和 苦 需 的 成 员 
表 C-1 


属性 /方法 相关 说 明 

该 属性 是 所 有 对 象 的 原型 (包括 Object 对 象 本 身 )， 语 言 中 的 其 他 
对 象 正 是 通过 在 该 属性 上 添加 东西 来 实现 它们 之 间 的 继承 关系 的 。 
所 以 请 小 心 使 


> var s = new String('noodles'); 


Kann 


Object .prototype 
> Object.prototype.custom = 1; 


1 


> s.custom; 
1 


Object.prototype 的 成 员 


表 C-2 
属性 /方法 相关 说 明 


盟 性 指向 用 来 构造 该 对 象 的 构造 器 ， 在 这 里 为 object () 
> Object. prototype. constructor === Object; 


NN 


true 
constructor 
> Var o = new Object (); 

> o.constructor === Object; 
true 


该 方法 返回 的 是 一 个 用 于 描述 目标 对 象 的 字符 串 。 特 别 地 ， 当 
标 是 一 个 Number 对 象 时 ， 我 们 还 可 以 传递 一 个 用 于 进 制 数 的 
参数 radix， 该 参数 的 默认 值 为 10 

toString (radix) > var o = {prop: 1}; 


>- DOMEOStCILNng(): 
"[object Object]" 


> var n = new Number(255)， 
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续 表 
属性 /方法 相关 说 明 
> :EOStrindg()> 
"255" 
> mtoString(le6)? 
"ff" 
该 方法 的 作用 与 toString0 基 本 相同 , 只 不 过 它 会 做 一 些 本 地 
化 处 理 。 该 方法 会 根据 当前 对 象 的 不 同 而 被 重 写 ， 例 如 
Date()，Number()，Array()， 它 们 的 值 都 会 以 本 地 化 的 形式 
输出 。 当 然 ， 对 于 包括 ObjectO 在 内 的 其 他 大 多 数 对 象 来 说 ， 
toLocaleString () 该 万 法 与 toString() 是 基本 相同 的 。 


在 浏览 器 环境 下， 我 们 还 可 以 通过 BOM 对 象 Navigator 的 
language 属性 (在 IE 中 则 是 userLanguage) 来 了 解 当前 所 使 
的 语言 : 


> navigator.language; 


"en-US" 


ValueoOf () 


该 方法 返回 的 是 用 基本 数据 类 型 所 表示 的 this 值 ， 如 果 它 


可 以 使 用 基本 数据 类 型 表示 的 话 。 例 如 


是 它 日 


Number 对 象 返回 的 


的 基本 数值 ， 而 Date 对 象 返 回 的 是 一 个 时 间 截 


(timestamp )。 如 果 无 法 用 基本 数据 类 型 表示 ， 该 方法 会 返回 
this 本 身 


> var o = {}; 
> typeof o.valueoOf () ， 
"object" 


> o.valueOof () === 0o; 


true 


> var n = new Number(101)， 
> typeof n.valueof () ， 
"number" 


> n.valueOof () === nN; 


false 
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属性 /方法 相关 说 明 


> var d = new Date() 
> typeof d.valueoOf () ， 
valueof () ee 
> Qq.valueoOft () 
1357840170137 


0 
eal 
红 
FT 


方法 仅 在 目标 属性 为 对 象 自身 属性 时 i true， 而 当 该 忆 
是 从 原型 链 中 继承 而 来 或 根本 就 不 存在 时 返回 false 


这 


请 
由 ul 


NN 


> var oO = {prop: 1}; 

> o.hasOwnProperty('prop'); 
hasOwnProperty (prop) ErEUS 
> o.hasOwnProperty('toString'); 
false 


> o.hasOwnProperty('fromString'); 
false 


如 果 目 标 对 象 是 当前 对 象 的 原型 ， 该 方法 就 会 返回 true， 而 且 ， 
当前 对 象 所 在 原型 链 上 的 所 有 对 象 都 能 通过 该 测试 ， 并 不 局 限于 
已 的 直系 关系 


> var s = new String('7) 
> Object.prototype.isPrototypeOf (s); 


7 


这 
对 
涪 


isPrototypeof (obj) true 


> String.prototype.isPrototypeOf (s); 
true 


> Array.prototype.isPrototypeof (s); 


false 
如 果 目 标 属性 能 在 for-in 循环 中 被 显示 出 来 , 该 方法 就 返回 true 
> var a = [1,2,3]; 


> a.propertyIsEnumerable('length'); 


propertyIsEnumerable (prop) f31 ee 


> a.propertylIsEnumerable (0); 


true 


TE 
在 ECMAScript 5 中 附加 的 Object 属性 


在 ECMAScript 3 中 ， 除 了 一 些 内 置 属性 (例如 ，Math .PI)， 对 象 所 有 的 属性 在 任 
何 时 候 都 可 以 被 修改 、 插 入 、 删 除 。 在 ES5 中 ， 我 们 可 以 设置 属性 是 否 可 以 被 改变 或 是 
删除 一 一 在 这 之 前 , 它 是 内 置 属性 的 特权 。ES5 引入 了 属性 描述 符 的 概念 ,我 们 可 以 通过 
它 对 所 定义 的 属性 有 更 大 的 控制 权 。 

我 们 可 以 把 属性 描述 符 想 象 成 一 个 对 象 ， 我 们 用 该 对 象 来 描述 某 个 属性 所 有 具有 的 各 种 
特征 。 描 述 这 些 特征 所 使 用 的 语法 与 一 最 的 对 象 标识 法 无 异 ， 所 以 属性 描述 符 也 会 有 自己 
性 与 方法 。 在 这 里 ， 为 了 避免 歧义 ， 我们 将 属性 描述 符 的 属性 称 为 特性 (attributes )。 


的 属性 

这 些 特性 包括 : 
value 一 一 当 试 图 获取 属性 时 所 返回 的 值 。 
writable 该 属性 是 否 可 写 。 


enumerable 一 一 该 属性 在 for-in 循环 中 是 否 会 被 枚 举 。 

configurable 一 一 该 属性 是 否 可 删除 。 

set () 一 一 该 属性 的 更 新 操作 所 调用 的 函数 。 

get () 一 一 获取 属性 值 时 所 调用 的 函数 。 
外 , 数据 描述 符 ( 其 中 属性 为 : enumerable, configurable,value, writable) 
与 存 取 描述 符 〈( 其 中 属性 为 : enumerable，configurable，set()，dget()) 之 间 是 
有 互 斥 关系 的 。 在 定义 了 set () 和 get () 之 后 ,描述 符 会 认为 存 取 操作 已 被 定义 过 了 ， 其 
后 再 定义 value 和 writable 会 引起 错误 。 


以 下 是 ES3 风格 的 属性 定义 方式 : 


Hi © SS $$ 4 


Var persion = {}; 


person.legs = 2; 


以 下 是 等 价 的 ES5 通过 数据 描述 符 定义 属性 的 方式 : 


Var persion = {}; 


Object.defineProperty (person, "legs",f{ 
value: 2, 
writable: true, 


configurable: true, 
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numerable: tru 


}); 
其 中 ， 除 了 value 的 默认 值 为 undefined 以 外 ， 


其 他 的 默认 值 都 为 false。 这 


也 就 意味 着 ， 如 果 我 们 想 要 通过 这 一 方式 定义 一 个 可 写 的 属性 ， 必 须 显 式 将 它们 设 为 


廿 YUe 。 


或 者 ， 我 们 也 可 以 通过 ES5 的 存 取 描述 符 来 定义 : 


Var person = {}; 


Object.defineProperty (person, "legs", { 
set: function (v) {this.value = Vv;}, 
get: function(v) {return this.value;}, 


configurable: true, 


numerable: tru 


}); 


person.legs = 2; 


如 您 所 见 ， 现 在 我 们 手 里 多 了 许多 可 用 于 描述 属性 


的 代码 ， 如 果 想 要 防止 别人 自 改 


我 们 的 属性 ， 就 必须 要 用 到 它们 。 此 外 ， 也 不 要 忘 了 浏览 器 在 向 后 兼容 ES3 方面 所 做 的 
考虑 。 例 如 ， 跟 添加 Array.prototype 属性 不 一 样 ， 我 们 不 能 在 旧版 的 浏览 器 中 使 用 “shim” 


一 特性 。 


另外 ， 我 们 还 可 以 (通过 定义 nonmalleable 属性 ) 在 


Var person = {}; 


\ 体 行为 中 运用 这 些 描述 符 : 


Object.defineProperty (person, 'heads', {value: 1}); 


> 
> 
> person.heads = 0; 
0 


> person.heads; 


> delete person.heads; 
false 


> person.heads; 
1 


下 面 ， 我 们 将 为 您 列 出 ES5 中 所 有 的 附加 Object 属性 


E 见 表 C-3。 
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表 C-3 
属性 /方法 


相关 说 明 


Object .getPrototypeof (obj) 


之 前 在 ES3 中 ， 我 们 往往 需要 通过 object .prototype. 
isPrototypeof () 去 猜测 某 个 给 定 对 象 的 原型 是 什么 ， 如 今 
在 ES5 中 ， 我 们 可 以 直接 询问 该 对 象 “你 的 原型 是 什么 ?” 

> Object.getPrototypeof ([]) === 


Array.prototype; 
true 


Object.create (obj, descr) 


正如 我 们 在 第 6 章 继 承 中 所 讨论 的 那样 ， 该 方法 主要 用 


一 个 新 对 象 ， 并 为 其 设置 原型 ， 用 ‘上述 ) 属性 描述 符 定义 对 
象 的 原型 属性 。 
> Var parent = {hi: 'Hello'}; 
> Var 0 = Object.create (parent, { 
BeeoB :1 
value: 1 
} 
}); 
> 0. 
"Hello" 
现在 ， 我们 甚至 可 以 用 它 来 创建 一 个 完全 空白 的 对 象 ， 这 样 的 
事情 在 ES3 中 可 是 做 不 到 的 。 
> Var 0 = Object.create (null); 


> typeof o.toString; 
"undefined" 


Object.getOwnPropertyDescrip 


tor (obj ， property) 


该 方法 可 以 让 我 们 详细 查看 一 个 属性 的 定义 。 您 甚至 可 以 通过 
它 一 笑 那 些 内 置 的 ， 之 前 不 可 见 的 隐藏 属性 。 
> Object.getOownPropertyDescriptor ( 


Object .prototype，'toString') ， 
Object 

configurable: true 

enumerable: false 

value: function toString() { [native code] } 


writable: true 


Object .getOwnPropertyNames 


(obj) 


该 方法 返回 一 个 数组 , 其 中 包含 了 当前 对 象 所 有 属性 的 名 称 ( 字 
符 串 )， 不 论 它们 是 否 可 枚 举 。 当 然 ， 您 也 可 以 用 obJject . 
Keys () 方法 来 单独 返回 可 枚 举 的 属性 。 

> Object.getOownPropertyNames ( 


Object .prototype) ; 
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属性 /方法 相关 说 明 


biect get owneroPertyNanes ["constructor", "toString", "toLocaleString", 


(obj) "valueOf",... 
Object .defineProperty (obj, 该 方法 可 通过 某 属 性 描述 符 来 定义 某 对 象 的 属性 。 详 细 内 容 可 
descriptor) 参考 我 们 在 当前 表格 之 前 所 做 的 讨论 。 


该 方法 的 作用 与 defineProperty () 基本 相同 ， 只 不 过 它 可 
以 用 来 一 次 定义 多 个 属性 。 
> var glass = 


Object.defineProperties({}, { 
VCOLOP™: 


value: "transparent", 
writable: true 


Object.defineProperties (obj, 


descriptors) }, 

"fullness": { 
value: "half"， 
writable: false 

} 

}); 
glass.fullness; 
"half" 


preventExtensions() 方法 用 于 禁止 向 某 一 对 象 添 加 更 多 
属性 , 而 1sExtensible () 方 法 则 用 于 检查 某 对 象 是 否 还 可 以 
被 添加 属性 。 


> Var deadline = {}; 
> Object.isExtensible (deadline); 
true 
Object .preventExtensions (obj) > deadline.date = "yesterday"; 
Object.isExtensible (obj) “yesterday” 
> Objec 


preventExtensions (deadline); 

> Object.isExtensible (deadline); 
false 

> deadline.date = "today"; 
"today" 

> deadline.date; 


nm today" 
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属性 /方法 相关 说 明 
尽管 往 某 个 不 可 扩展 的 对 象 中 添加 属性 不 算是 一 个 错误 操作 ， 
Object.preventExtensions (obj) | 但 它 没有 任何 作用 。 


Object.isExtensible (obj) 


> deadline.report = true; 
> deadline.report; 
undefined 


Object. seal (obj) 


Object.isSealed (obj) 


seal () 方 法 的 作用 与 preventExtensions() 基本 相同 , 但 
除 此 之 外 ， 它 还 会 将 所 有 现 有 属性 设置 成 不 可 配置 。 也 就 是 说 ， 
在 这 种 情况 下 , 我 们 只 能 变更 现 有 属性 的 值 , 但 不 能 删除 或 (用 
defineProperty() ) 重新 配置 这 些 属性 , 例如 不 能 将 一 个 可 
枚 举 的 属性 改 成 不 可 枚 举 。 


Object.freeze (obj) 


Object.isFrozen (obj) 


该 方法 用 于 执行 一 切 不 受 seal () 方法 限制 的 属性 值 变更 。 
> Var deadline = Object.freeze( 
{date: "yesterday"}); 
> deadline.date = "tomorrow"; 
> deadline.excuse = "lame"; 
> deadline.date; 
"yesterday" 
> deadline.excuse; 
undefined 


> Object.isSealed (deadline); 
true 


Object. keys (obj) 


调 


该 方法 是 一 种 特殊 的 for-in 循环 。 它 只 返回 属于 当前 对 象 的 
属性 〈 不 像 for-in)， 而 且 这 些 属性 也 必须 是 可 枚 举 的 〈 这 点 
与 Object .getOownPropertyNames () 不 同 )。 返 回 值 是 一 人 
字符 串 数组 。 
> Object.prototype.customProto = 
L101 
> Object.getOownPropertyNames ( 
Object .Prototype) ; 
["constructor", "toString", ..., "customproto"] 
> Object.keys (Object.prototype); 


["customProto"] 
> Var oO = {own: 202}; 


> o.customProto; 
101 

> Object.keys (0o); 
["own"] 


附录 C 内 建 对 象 319 


Array 


Array () 是 一 个 用 来 创建 数组 对 象 的 构造 器 〈 见 表 C-4): 


> var a = new Array(1,2,3); 


当然 ， 我 们 同样 也 能 使 用 数组 标识 法 : 


> var a = [1,2,3]; //recommended 


需要 注意 的 是 ， 如 果 我 们 传递 给 Array () 构造 器 的 是 一 个 数字 ， 该 数字 就 会 被 设 
定 为 数组 的 长 度 。 
> var un = new Array(3); 


> un.lengtnh; 
3 


构造 器 将 会 根据 所 给 定 的 数组 长 度 来 创建 数组 ， 并 将 每 个 元 素 位 置 以 undqefined 值 
填充 。 


> un; 
[undefined，undefined，undefined] 


以 此 方法 构建 的 数组 只 有 长 度 ， 却 不 含 元 素 。 这 种 数组 与 一 般 的 有 元 素 的 数组 有 一 些 
微妙 的 差别 : 


>* OW ‘TH a 

true 

> 0 Tn uns 

false 

这 一 差别 可 能 导致 Array(0) 构 造 器 的 使 用 方式 (在 只 有 一 个 参数 时 ) 与 你 的 预想 不 符 。 
例如 ， 下 面 是 一 个 用 数组 标识 法 创建 的 有 效 数组 : 


> var a = [3.14]; 
> a; 
[3.14] 


然而 ， 如 果 我 们 将 该 浮 点 数 传递 给 Array () 构造 器 的 话 ， 就 会 出 错 : 
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> "ara 二 


Range Error: 


Array.prototype 的 成 员 


new Array (3.14) 


invalid array length 


表 C-4 
属性 /方法 相关 说 明 
该 属性 返回 的 是 数组 中 元 素 的 个 数 
Length > [1,2,3,4] .1length; 
4 
该 方法 主要 用 于 合并 数组 
concat (il, i2, i3, > [1,2] .concat ([3,5], [7,11]); 
[1, 2, 3, 5, 7, 11] 
该 方法 用 于 将 数组 中 的 元 素 连 成 一 个 字符 串 。 我 们 可 以 通过 参数 来 
指定 元 素 之 间 的 分 割 字 符 串 ， 其 默认 值 是 逗号 
> 
2 7 二 如 
join (separator) 
> T1233a jo | 
本 下 | 2 | 3 
> 17273] 3IT0LN( LS LesS than ™)s 


"1 is less than 2 is less than 3" 


该 方法 用 于 移 除 数组 中 的 最 后 一 个 元 素 ， 并 将 其 返回 
> var a= ['un', 'deux', 'trois']; 
> a.pop(); 
pop () "trois" 
> 
["une", "deux"] 
该 方法 用 于 将 新 元 素 添 加 到 数组 的 末尾 ， 并 返回 修改 后 的 数组 
长 度 
pusti (Tl 2 Lo aas) Sa 


SN ‘ebra yy" 


4 


'zag', 


ZOO.)y 


属性 /方法 
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续 表 
相关 说 明 


reverse() 


该 方法 用 于 反 转 数组 中 的 元 素 顺序 ， 并 返 


五 


修改 后 的 数组 


> var a = [1,2,3]; 


> a.reverse(); 


[3, 2, 1] 
> a; 
[3, 2, 1] 
该 方法 与 pop () 基本 相同 ， 只 不 过 这 里 移 除 的 是 首 元 素 ， 而 不 是 最 
后 一 个 元 素 
> var a = [1,2,3]; 
shift () > a.shift(); 
1 
> a; 
[2, 3] 
该 方法 用 于 截取 数组 的 某 一 部 分 ， 但 不 会 对 原 数组 进行 任何 修改 
> var a = ['apple', 'banana', 


slice(start index, 


end index) 


"TS y "Cas orange”]; 
> a.slice(2,4); 
[js "css"] 
> 


"a le" "panana" "js" "Css" ” "oran e"] 
PP / / 


sort (call back) 


该 方法 主要 用 于 数组 的 排序 ， 它 有 一 个 可 选 参数 ,是 一 个 回调 函 


数 ， 我们 可 以 用 它 来 自 定义 排序 规则 。 该 函数 应 该 以 两 个 数组 元 
素 为 参数 ， 两 个 参数 相等 时 返回 0， 第 一 个 参数 大 时 返回 正 数 ， 
第 二 个 参数 大 时 返回 负数 


下 面 我 们 来 演示 一 个 按 数 字 顺 序 排序 的 自 定 义 函 数 〈 默 认 是 按照 字 
符 顺 序 的 ): 


function customSort(a, b)f{ 
if (a > b) return 1; 
if (a < b) return -1; 


return 0; 
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续 表 
属性 /方法 相关 说 明 

然后 ， 我 们 将 其 应 用 于 sort () 方法 : 
> var a = [101, 99, 1, 5]; 
> a.sort(); 
[1, 101, 5, 99] 

sort (call back) > a.sort(customSort); 

[1, 5, 99, 101] 
> [ronDnol: Sort (oustomSort),> 
[5, 6, 7, 9] 

该 方法 可 在 删除 元 素 的 同时 添加 新 的 元 素 。 第 一 个 参数 所 表示 的 是 要 


SPD1Lice (Statrty qelete _ 


COUTtE -L727 3 


删除 元 素 的 始 起 位 置 ， 第 二 个 参数 代表 的 是 要 删除 元 素 的 个 数 ， 
参数 则 都 是 一 些 将 要 插入 在 此 处 的 新 元 素 


> var a = ['apple', 'banana', 

"Toy OSS Orange ls 
> a.splice(2, 2, 'pear', 'pineapple'); 
["js", "css"] 
> a; 


~ 余 


["apple","banana","pear","pineapple","orange"] 


aliEt (Ll Tp ) 


该 方法 的 功能 与 push () 方法 类 似 ， 只 不 过 元 素 将 会 被 添加 到 数组 的 


元 素 后 返回 修改 后 的 数组 长 度 


> var a = [1,2,3]; 

> a.unshift('one', 'two'); 
5 

> 

["one", "two", 1, 2, 3] 


在 ECMAScript 5 中 增加 的 Array 属性 


表 C-5 
属性 /方法 


相关 说 明 


开始 处 ， 而 不 是 末尾 处 。 另 外 和 shift () 方 法 一 样 ， 它 也 会 在 添加 完 


Array. 


isArray (obj) 


于 分 辨 某 个 对 象 是 否 是 数组 
于 typeof 无 法 分 辨 数组 : 


属性 /方法 
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续 表 
相关 说 明 


Array. 


isArray (obj) 


> Var arraylike = {0: 101, lengthn: 1}; 


> typeof arraylike; 
"object" 

> typeofl[]; 
"object" 


种 类 型 风格 ， 


同样 无 效 的 还 有 “鸭子 类 型 ”( 所 谓 “ 鸣 子 类 型 ”是 动作 ， 语 言 中 的 


它 的 理论 基础 是 : 如 果 一 只 鸟 儿 走 起 来 像 鸭 子 并 且 叫 起 


来 也 像 鸭子 ， 那 么 它 就 是 鸭子 ): 


typeof arraylike.length; 
"number" 


在 ES3 中 ， 


> 


为 判断 数组 ， 我 们 需要 这 么 处 理 : 


> Object.prototype.toString.call([]) 
=== "[object Arrayl"; 


true 


> Object.prototype.toString.call (arraylike) 


=== "object Array"; 


false 


在 ES5 中 ， 


我 们 有 了 更 为 简短 的 方法 : 


> Array.isArray ([]); 


true 


> Array.isArray (arraylike); 


false 


Array.prototype. 


indexOf (needle, 


idx) 


搜索 数组 ， 返 


第 一 个 匹配 元 素 的 下 标 。 如 果 没 有 匹配 项 ， 该 函数 返 


区 


回 -1。 第 二 个 参数 为 可 选项 ， 为 搜索 的 起 始 下 标 


> Var ar = {'one', ‘'two', 'one', ‘'two'}; 
> ar.indexOf (two); 

1 

> ar.indexOf ('two', 2); 

3 

> :arindexoOf( toot™)s 

-1 


与 indexof () 的 功能 类 似 。 从 后 往 前 地 搜索 数组 
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续 表 
属性 /方法 相关 说 明 
> var ar = ['one', ‘'two', 'one', ‘'two']; 
> ar.lastIindexOf ('two'); 


Array.prototype. 


lastIindexOf (needle, 


idx) 


> ar.lastIndexOf ('two', 2); 


> ar.indexOf ('toot'); 
-1 


Array.prototype. 


forEach (callback, 


this obj) 


for 循环 语法 的 替代 。 自 定义 的 callback 函数 会 为 每 个 数组 元 素 执 
行 一 次 。callback 函数 会 收 到 三 个 参数 : 本 次 循环 的 元 素 ， 该 元 素 


的 下 标 ， 以 及 整个 数组 


fo 


名 


> var log = console.log.bind(console); 
> var ar = ['itsy', 'bitsy', 'spider']; 
> ar.forEach (109); 

itsy 0 ["itsy", "bitsy", "spider"] 
bitsy 1 ["itsy", "bitsy", "spider"] 
spider 2 ["itsy", "bitsy", "spider"] 


Each 函数 的 第 二 个 参数 为 可 选项 ， 该 参数 为 callback 函数 的 


调 


> 


j 者 。 以 下 代码 与 上 述 代码 等 价 : 


ar.forEach (console.1og, console) 


Array.prototype. 
every (callback, 


this obj) 


自 定 义 的 callback 函数 会 为 每 个 元 素 执行 一 次 。 每 次 执行 都 应 根据 
元 素 返 回 true 或 者 false， 代 表 该 元 素 是 否 通过 测试 。callback 
获得 的 参数 与 forEach 相同 。 

如 果 所 有 元 素 都 通过 了 测试 ，every () 函数 返 


至 少 有 一 个 元 素 未 通过 测试 ，every () 函数 


I 


true。 反 之 ， 如 果 


false 


扩 


> function hasEyel(el, idx, ar) { 

return el.indexOf ('i') !== -1; 
} 
> ['itsy', 'bitsy', 'spider'] .every (hasEye); 
true 


> ['eency', ‘'weency', 'spider' ]， 
every (hasEye); 
false 


属性 /方法 
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相关 说 明 


循环 中 ， 知 every () 结果 显然 为 false， 则 循环 会 中 止 并 且 立 即 返 
回 false 


> [1,2,3] .every(function (e) { 
console.1log(e); 
return false; 


}); 


1 
false 
与 every () 类 似 ， 返 回 值 为 “是 否 至 少 个 元 素 通过 测试 ”; 
Array.prototype. > ['itsy', 'bitsy', 'spider'] .some (hasEye); 
true 


some (callback, 


this obj) 


> ['eency', ‘'weency', 'spider']. 


some (hasEye); 
true 


Array.prototype. 
filter(callback, 


this obj) 


a 


与 some () 及 every() 类似 ， 返 回 所 有 符合 测试 的 元 素 : 


> ['itsy', 'bitsy', 'spider'] .filter (hasEye); 
["itsy", "bitsy", "spider"] 


> ['eency', 'weency', 'spider'].filter (hasEye); 
["spider"] 


Array.prototype. 
map (callback, 


this obj) 


与 forEach 类 似 。 返 回 值 为 数组 ， 数 组 元 素 为 每 次 callback () 函 
数 的 返回 值 。 这 个 例子 会 将 数组 元 素 内 的 字母 都 转 为 大 写 : 


> function uc(element, index, array) { 


return element.toUpperCase(); 
} 
> ['eency', ‘weency', 'spider'] .map (uc); 
["EENCY", "WEENCY", "SPIDER"] 


Array.prototype. 


reduce (callback, start) 


为 每 个 元 素 执 行 一 次 callback 函数 。 每 次 callback 的 返回 值 都 
会 作为 下 一 次 循环 的 参数 。 最 终 ， 对 整个 数组 的 操作 将 返回 一 个 单一 
的 值 。 


> function suml(res, element, idx, arr) { 


| 


return res + element; 
lt 
> [1, 2, 3] .reduce (sum); 
6 
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续 表 
属性 /方法 相关 说 明 
start 参 数 为 可 选 参 数 ， 如 果 设 置 ， 将 作为 第 一 次 callback() 执 
Array.prototype. 行 时 的 传 入 参数 : 
reduce (callback, start) > [1, 2, 3] .reduce (sum, 100);， 
106 


与 reduce () 类 似 ， 但 从 后 到 前 地 遍历 数组 元 素 : 


> function concat (result so far, el) { 


return "Tresult, So fart + :Gls 
Array.prototype. } 

> [1, 2, 3] .reduce (concat);} 

A 


reduce (callback, start) 


> [1, 2, 3] .reduceRight (concat); 
2 


Function 


在 JavaScript 中 ， 函 数 也 是 一 种 对 象 ， 可 以 通过 Function() 构造 器 来 定义 ， 
例如 : 


> Var sum = new Function('a', 'b', 'return a + b;"'); 


这 与 下 面 的 函数 标识 法 执行 效果 是 相同 的 。 但 在 大 多 数 情况 下 ， 我 们 并 不 鼓励 上 述 
做 法 : 


> Var sum = function(a, b)ft 
Raa be os ea 0 


}; 


当然 ， 我 们 还 有 更 常见 的 函数 定义 方式 : 


> function sum(a, b) 1{ 


return a + b; 
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Function.prototype 的 成 员 
表 C-6 
属性 /方法 相关 说 明 
该 方法 主要 用 于 在 当前 对 象 的 this 值 上 调用 其 他 函数 。apply () 的 第 一 
个 参数 所 引用 的 是 将 要 绑 定 到 this 值 上 的 函数 对 象 。 而 第 二 个 参数 是 一 
个 数组 ， 用 于 存储 调用 该 函数 对 象 时 所 需 的 参数 。 
function whatIsIt() { 


return this.toString() 
} 
params array) > Var myObj = {1}; 
> whatIsIt.apply (myObj); 
"[object Object]" 


apply (this obj, 


> whatIsIit.apply (window); 

" [object Window]" 

call (this_obj， pl，| 该 方法 与 apply () 基本 相同 ， 只 不 过 其 调用 函数 所 需 的 参数 是 一 个 一 个 伟 
D2 BI ds) 递 的 ， 而 不 再 是 一 个 数组 
该 属性 返回 的 是 函数 所 预期 的 参数 个 数 


> parseInt.length; 


2 
让 我 们 来 看 一 下 call () 与 apply () 两 个 函数 在 这 一 属性 上 的 差异 : 
length > Function.prototype.call.length; 
1 


> Function.prototype..apply.length; 
2 


call() 的 lengtn 属性 值 为 1， 因 为 该 函数 只 有 第 一 个 参数 为 必须 参数 。 


ECMAScript $5 对 Function 的 附加 支持 
表 C-7 
属性 /方法 相关 说 明 
过 此 函数 可 以 为 函数 调用 指定 this 值 。call () 方法 与 apply () 方 法 
接 执行 函数 ， 而 bind () 方法 会 返回 新 的 函数 。 比 较 常用 的 场景 是 ， 
9 50 Pr9 9 7， | 当 你 需要 将 A 方 法 作为 B 对 象 的 某 个 方法 的 回调 函数 , 而 我 们 希望 方法 
ang) 的 this 指向 另 一 个 对 象 时 


> whatIsIt.apply (window); 
"[object Window]" 


[E: 
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Boolean 


Boolean () 构造 器 所 创建 的 是 一 个 布尔 类 型 的 对 象 〈 这 并 不 等 同 于 基本 布尔 类 型 )。 由 
于 这 种 布尔 对 象 的 实际 作用 很 有 限 ， 因 此 这 里 将 它 列 出 来 ， 完 全 只 是 出 于 知识 的 完整 性 考虑 。 


> Var b = new Boolean () ， 
> b.valueoOf () 
false 


> p.toString(); 
"false" 


要 注意 的 是 ， 布 尔 对 象 与 基本 布尔 值 并 不 相同 。 正 如 我 们 所 了 解 的 ， 所 有 对 象 本 质 
上 都 属于 truthy 值 。 


> b === false; 
false 


> typeof b; 
"object" 


另外 ， 除 了 从 object 中 继承 来 的 内 容 外 ，Boolean 对 象 中 并 没有 任何 其 他 属性 。 


Number 


下 面 我 们 来 创建 一 个 数字 对 象 : 


> var n = new Number (101); 
> typeof n; 
"object" 


> n.valueOof () ， 
101 


要 注意 的 是 ，Number 对 象 并 不 等 同 于 基本 数字 类 型 ， 但 如 果 我 们 在 某 个 基本 数字 
类 型 值 上 调用 了 一 个 Number .prototype 的 方法 ， 那 么 该 基本 数字 类 型 就 会 被 自动 转换 
成 Number 对 象 ， 例 如 ; 
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> var n = 123; 
> typeof n; 
"number" 


> ot OStELNg0)2 
3 


ME 


脱离 new 修饰 符 而 单独 使 用 的 Number () 函数 返回 基本 数字 类 型 。 


> Number ("101") ， 
101 


> typeof Number ("101"); 
"number" 


> typeof new Number ("101"); 
"object" 


Number 构造 器 的 成 员 


表 C-8 
属性 /方法 相关 说 明 
该 属性 返回 是 一 个 常量 (不 可 变 的 )， 表 示 该 对 象 所 能 取 的 最 大 值 


> Number .MAX VALUE; 
1.7976931348623157e+308 


Number .MAX VALUE 


这 
本 


性 返回 的 是 JavaScript 中 的 最 小 值 

Number .MIN_VALUE > Number .MIN VALUE; 
5e-324 

该 属性 返回 的 是 一 个 表示 “Not A Number” 的 值 


> Number.NaN; 


Number .NaN NaN 
NaN 与 任何 值 都 不 相等 ， 包 括 它 自己 。 
> Number.NaN === Number. NaN; 
false 
Number .POSITIVE INFINITY 与 全 局 变量 Infinity 一 样 


Number .NEGATIVE INFINITY 与 -Infinity 一 样 
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DA = | 
Number 对 象 的 成 员 
表 C-9 
属性 /方法 相关 说 明 
该 方法 将 返回 一 个 字符 串 ， 以 定点 小 数 的 形式 来 表示 某 一 
数字 ， 并 进行 四 合 五 入 
> Var n = new Number (Math.PI); 
toFixed (fractionDigits) > n.valueoOf (); 
3.141592653589793 
> n.torFixed(3); 
"3.142" 
该 方法 将 返回 一 个 字符 串 ， 以 指数 形式 来 表示 某 一 数字 ， 
toExponential 并 进行 四 舍 五 入 
(fractionDigits) > var n = new Number (56789); 


> n.toExponential (2); 
"5.68et+4" 


该 方法 将 返回 一 个 字符 串 ， 其 表示 的 数字 形式 既 可 以 是 指 
数 型 的 ， 也 可 以 是 定点 小 数 型 的 


> var n = new Number(56789) ， 


> n.toPprecision (2) 
"5.7et+4" 


> n.toPrecision(5) ， 


toPrecision (precision) "56789" 


> n.toPrecision(4); 
"5.679et+4" 


> Var n = new Number (Math.PI); 
> mn.toPrecision(4) ， 
T3142" 


String 


string () 是 一 个 用 于 创建 字符 串 对 象 的 构造 器 ， 如 果 我 们 在 一 个 基本 字符 串 值 上 调 
属于 该 对 象 的 方法 ， 那 么 该 字符 串 就 会 被 自动 转换 为 String 对 象 。 


nT 
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下 面 ， 我 们 来 创建 一 个 字符 串 对 象 和 一 个 基本 字符 串 : 


> Var S_obj = new String('potatoes'); 
> Var s prim = 'potatoes'; 

> typeof s obj; 

"object" 


> typeof s prim; 
"string" 


当 我 们 使 用 二 = (严格 等 于 》 比 较 该 对 象 和 基本 类 型 时 ， 它 们 是 不 相等 的 。= 一 与 一 
的 不 同 点 在 于 后 者 会 自动 进行 类 型 转换 。 


> S_obj === s_ prim; 
false 
> s obj == s_prim; 
true 


length 这 个 属性 实际 上 是 字符 串 对 象 的 。 


> s_ obj.length; 
8 


自动 被 


形 
NN 
家 
下 
壕 
> 


如 果 我 们 在 一 个 不 属于 对 象 的 基本 字符 串 上 访问 length 属 怕 
转换 成 相应 的 对 象 ， 并 成 功 返 回 字符 串 长 度 ， 比 如 : 


> s prim.length; 
8 


字符 串 标识 法 同样 有 效 : 


> "giraffe".length; 


7 
String0 构 造 器 的 成 员 
表 C-10 


属性 /方法 相关 说 明 
该 方法 会 根据 用 户 输入 的 字符 编码 来 创建 字符 串 ， 并 将 其 返 匠 


> String.fromCharCode (115, 99, 114, 
code2, code3, ...) 1057 T27116).; 


String.fromCharCode (codel, 


"script" 
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String.prototype 的 成 员 


表 C-11 


属性 /方法 


相关 说 明 


length 


该 属性 返回 字符 串 中 的 字符 数量 


> new String('four').length 
4 


charAt (position) 


该 方法 返回 指定 位 置 处 的 字符 ， 位 置 从 0 开始 计数 


> Vocript™. charAt (0) .> 
ve 


从 ES5 开始 ， 也 可 以 使 用 数组 标识 法 来 代替 。 其 实在 ES5 之 前 ， 
这 个 特性 长 久 以 来 就 被 正 以 外 的 浏览 器 广 为 支 持 


0 
Wve" 


charCodeAt (position) 


该 方法 返回 指定 位 置 处 字符 的 Unicode 编码 


> "script".charCodeAt (0) ; 
115 


CONCat (strLy. Str2, 


该 方法 利用 当前 字符 串 将 输入 中 的 各 个 子 串 连 楼 成 一 个 新 的 字符 8 


Hd 


> oCGnoat( Sig yy My Vyadv)y 
"Zig-zZag" 


indexOf (needle, start) 


R 


该 方法 用 于 返回 匹配 串 的 起 始 位 置 。 第 二 个 参数 是 可 选 的 ， 


返 


于 指定 搜索 的 开始 位 置 。 如 果 方 法 没有 找到 匹配 串 ， 就 会 


可 -1 


> "Javascript.indexof('scr’)? 
4 


> "javascript".indexOf('scr', 5); 
-1 


lastIndexOf (needle, 


start) 


该 方法 与 indexof () 的 功能 基本 相同 ， 只 不 过 它 的 搜索 是 从 后 面 


开始 的 ， 例 如 我 们 要 搜索 字符 串 中 的 最 后 一 个 “a”: 


> "javascript".lastIindexOf ('a'); 
3 


localeCompare (needl 


) 


该 方法 会 将 两 个 字符 串 放 在 当前 


二 


和 区 域内 进行 比 对 ， 如 果 两 个 字符 


串 完 全 相同 就 返回 0， 如 果 比 较 时 needle 中 的 字符 序列 靠 前 就 返 
返 


口 


1， 人 否则 就 


可 -1 
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续 表 
属性 /方法 相关 说 明 

> "script".localeCompare('crypt'); 

1 

> "script".localeCompare('sscript"');) 

localeCompare (needle) -1 
> "script".localeCompare('script"'); 
0 
该 方法 会 根据 其 接受 的 正则 表达 式 对 象 返 回 一 个 容纳 所 有 [匹配 串 

match (regexp) 的 数组 


> "R2-D2 and C-3PO".match(/[0-9]/9g); 
[2 2 "3"] 


该 方法 用 于 替换 字符 串 对 象 中 所 有 匹配 相关 正则 表达 式 的 内 容 。 
另外 ， 我 们 还 可 以 通过 replacement 参数 设置 一 系列 不 同 的 匹配 模 
replace (needle, 式 ， 例 如 $l1、$2、…… 训导 


replacement) > "R2-D2".replace(/2/g, '-two'); 
"R-two-D-two" 


> "R2-D2".replace(/(2)/g, '$1$1°'); 
"R22-D22" 


| 


该 方法 会 返回 正则 表达 式 匹 配 的 第 一 个 子 串 的 位 


> "C-3PO" .search(/[0-9]7/) 
2 


search (regexp) 


该 方法 会 返回 字符 串 中 start 到 eng 之 间 的 部 分 。 如果 start 的 
值 是 个 负数 , 那么 开始 位 置 实际 上 等 于 length+start, 同样 的 ， 


如 果 end 的 值 是 负数 ， 其 结束 位 置 等 于 lengthtend 


I 


slice(start, end) > "R2-D2 and C-3PO".slice (4,13); 
"2 and C-3" 


> "R2-D2 and C-3PO".slice(4,-1); 
"2 and C-3P" 


该 方法 可 以 将 字符 串 转换 成 一 个 数组 。 它 的 第 二 个 参数 limit 是 
可 选 的 。separator 参数 是 一 个 正则 表达 式 ， 也 可 以 是 字符 是 


split (separator, limit) > "1,2,3,4".split (/,/); 
[7 2 Mec "4"] 


Ud 


> "1,2,3,4".split(',', 2); 
LE™1 "2"] 
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属性 /方法 


续 表 
相关 说 明 


substring(start, end) 


该 方法 的 功能 与 slice () 基本 相同 。 如 果 start 或 send 为 负 值 或 
无 效 值 时 ， 它 们 会 被 视 为 0。 如 果 它 们 的 值 大 于 length， 则 都 会 被 
视 为 length。 如 果 end 大 于 start， 则 它们 动 交换 彼此 的 值 


> "R2-D2 and C-3PO".substring(4, 13); 
"2 and C-3" 


> "R2=D2 and C=3PO".substring (13, 4)2 
"2 and C-3" 


toLowerCase() 


toLocaleLowerCase() 


这 两 种 方法 都 可 将 字符 串 内 容 转换 为 小 写 


> "UAVA" .toLowerCase () 


mr java" 


toUpperCase() 


toLocaleUpperCase() 


这 两 种 方法 都 可 将 字符 串 内 容 转换 为 大 写 
> "Script" .toUpperCase () ， 
"SCRIPT" 


ECMAScripts 对 String 的 补充 


表 C-12 


属性 /方法 


相关 说 明 


String.prototype. 


trim() 


Date 


在 ES3 中 ， 我 们 通过 使 用 正则 表达 式 相 关 的 方式 来 移 除 字符 串 让 
末 的 空 字符 。 在 ES5 中 ， 我 们 有 了 专门 的 函数 trim() : 
> " \t beard \n".trim(); 
"beard" 
也 可 以 使 用 ES3 的 方式 : 
>-Y NtDeard NIM rebLaee(/Ne oy ys 
"beard" 


Kaun 


Date0 构 造 器 可 以 有 以 下 几 种 不 同 的 输入 类 型 。 
我 们 可 以 分 别 将 年 、 月 、 日 、 小 时 、 分 钟 以 及 毫秒 的 值 传递 给 构造 器 ， 例 如 : 
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> new Date(2015; O07 17 13; 30, .35; 505)3 
Thu Jan 01 2015 13:30:35 GMT-0800 (PST) 


令 ”上面 所 列 出 的 这 些 参数 ， 都 是 可 以 跳 过 的 ， 在 这 种 情况 下 它们 会 被 默认 为 0。 要 
注意 的 是 , 月份 的 值 是 从 0 (一 月 ) 到 11 (十 二 月 ) 的 ， 小 时 的 值 是 从 0 到 23 的 ， 
分 钟 和 秒 数 的 值 都 是 0 到 $9， 毫 秒 数 则 是 从 0 到 999。 


令 我 们 可 以 传递 给 构造 器 一 个 时 间 戳 : 


> new Date (1420147835505) ， 
Thu Jan 01 2015 13:30:35 GMT-0800 (PST) 


令 ”如 果 我 们 没有 传递 给 构造 器 任何 参数 ， 它 就 会 返回 当前 日 期 /时 间 : 


> new Date () 
Fri Jan 11 2013 12:20:45 GMT-0800 (PST) 


令 ”如 果 我 们 传递 的 是 一 个 字符 串 ， 那 么 它 会 自动 分 析 并 提取 该 字符 串 中 的 有 效 日 期 信息 : 


> new Date('May 4, 2015"'); 
Mon May 04 2015 00:00:00 GMT-0700 (PDT) 


不 使 用 nevw 修饰 符 而 直接 调用 Date0 获 得 的 是 当前 时 间 的 字符 串 形 式 : 
> Date() === new Date() .toString () ， 
true 
Date0 构 造 堪 的 成 员 
表 C-13 
属性 /方法 相关 说 明 


六 


该 方法 的 作用 与 直接 将 字符 串 传 递 给 new Date () 类 似 ， 它 会 分 析 参 
数字 符 串 中 的 日 期 信息 并 返回 相应 的 时 间 戳 ， 如 果 失 败 则 返 


> Date.parse('May 5，20157) ， 
1430809200000 


NS 


| 


NaN 


Date.parse (string) 


> Date.parse('4tn'); 
NaN 


该 方法 返回 的 也 是 一 个 时 间 戳 ， 只 不 过 这 回 是 UTC 时 间 ( 即 
Coordinated Universal Time )， 不 是 本 地 时 间 


>"Dates UTe(20L5 0% Ly Ll3r B30 35r. 0 
1420119035505 


Date .UTC (year, month, date, 


hours, minutes, seconds, ms) 
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Date.prototype 的 成 员 


表 C-14 


属性 /方法 


相关 说 明 及 示例 


toUTCString() 


EL 


该 方法 与 toString () 基本 相同 ， 但 返回 的 是 UTC 时 间 ， 下 面 我 们 
来 看 看 太平 洋 时 间 (PST)、 本 地 时 间 与 UTC 之 间 究 竟 有 哪些 不 同 : 
> var d = new Date(2015, 0, 1); 
> tO teino()s 
"Thu Jan 01 2015 00:00:00 GMT-0800 (PST)" 


> d.toUTCString(); 
"Thu, 01 Jan 2015 08:00:00 GMT" 


toDateString () 


该 方法 只 返回 tostring () 中 的 日 期 部 分 : 
> new Date(2015, 0, 1) .toDateString(); 
"Thu Jan 01 2015" 


toTimeString () 


该 方法 只 返回 tostring () 中 的 时 钟 部 分 : 
> new Date(2015, 0, 1) .toTimeString(); 
"00:00:00 GMT-0800 (PST)" 


to 


to 


to 


LocaleString () 


LocaleDateString () 


LocaleTimeString () 


这 三 个 方法 基本 上 分 别 与 tostring()、toDateString() 以 及 
toTimeString () 等 效 。 但 格式 更 为 友好 ， 能 使 用 当前 用 户 所 设 
的 方式 来 显示 信息 
> new Date(2015, 0, 1) .toString() ， 
"Thu Jan 01 2015 00:00:00 GMT-0800 (PST)" 


> new Date(2015, 0, 1) .toLocaleString(); 
"1/1/2015 12:00:00 AM" 


getTime () 


setTime (time) 


这 组 方法 用 于 获取 或 设置 某 一 Date 对 象 中 的 时 间 《〈 以 时 间 戳 的 
式 )。 在 下 面 的 示例 中 ， 我 们 演示 了 如 何 创 建 一 个 Date 对 象 ， 并 将 它 
的 日 期 后 移 一 天 : 

> var d = new Date(2015, 0, 1); 


> d.getTime (); 
1420099200000 


NS 


> d.setTime(d.getTime() 
玉生 O00 类 60 六 但 01 汪 - 这 有 ) 司 
1420185600000 


> d.toLocaleString (); 
"Fri Jan 02 2015 00:00:00 GMT-0800 (PST)" 
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属性 /方法 相关 说 明 及 示例 


这 组 方法 用 于 获取 或 设置 Date 对 象 中 的 全 年 份 信息 (包括 本 地 时 间 
和 UTC 时 间 )。 在 这 里 不 能 用 getYear () ， 因 为 它 并 不 适用 于 公 
元 两 干 年 之 后 的 年 时 ， 所 以 还 是 使 用 getFullYear () 方法 为 好 


getFullYear() > var d = new Date(2015, 0, 1); 
> d. ; 
getUTCFullYear () ee getrearl) 


setFullYear (year, month, 


date) > d.getFullYear (); 


setUTCFullYear (year, 2015 


month, date) > d.setFullYear (2020); 


1577865600000 


> hes 
Wed Jan 01 2020 00:00:00 GMT-0800 (PST) 


这 组 方法 用 于 获取 或 设置 Date 对 象 中 的 月 份 信息 ， 它 是 从 0 (一 月 ) 


始 计数 的 : 
ge MoOmE > var d = new Date(2015, 0, 1); 
getUTCMonth () > d.getMonth (); 
0 


setMonth (month, date) 


> d.setMonthn (11) ， 
setUTCMonth (month, date) 1448956800000 


> d.toLocaleDateString(); 
"12/1/2015" 


这 组 方法 用 于 获取 或 设置 Date 对 象 中 的 日 期 信息 


> var d = new Date(2015, 0, 1); 
> d.toLocaleDateString(); 


getDate () "1/1/2015" 

getUTCDate () > Q.getDate () 

setDate (date) 1 

setUTCDate (date) > d.setDate(31); 
1422691200000 


> d.toLocaleDateString(); 
"1/31/2015" 
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属性 /方法 相关 说 明 及 示例 
getHours () 
getUTCHours () 


setHours (hour, min, sec, 
ms) 
setUTCHours (hour, min, 
ms) 


inutes () 


getUTCMinutes () 


inutes (min, sec, ms) 


setUTCMinutes (min, sec, 


getSseconds () 


和 


getUTCSeconds () 


setSeconds (sec, ms) 


setUTCSeconds (sec, ms) 


tMilliseconds () 
getUTCMilliseconds () 


illiseconds (ms) 


setUTCMilliseconds (ms) 


这 组 方法 分 别 用 于 获取 或 设置 Date 对 象 中 的 小 时 、 分 钟 、 秒 数 及 毫 
秒 数 信息 。 它 们 都 是 从 0 开始 计数 的 


> var d = new Date(2015, 0, 1); 
+ d.getMinutes (); 


> d.getHours() + ':" 
no On 


> d.setMinutes (59) ， 
1420102740000 


> GetHoOurs,() 
"0:59" 


+ d.getMinutes (); 


getTimezoneOffset() 


十 


该 方法 本 地 时 间 与 UTC 时 间 之 间 的 差距 ， 以 分 钟 为 单位 。 例 
如 下 面 实 现 的 是 PST( 即 Pacific Standard Time) 与 UTC 之 间 的 差距 : 


于 返 


> new Dat 
480 


() .getTimezoneOffset () ， 


> 420 / 60; 
8 


// hours 


getDay () 


getUTCDay () 


这 组 方法 返回 的 是 当前 时 间 的 星期 数 ， 从 0 《与 
> var d = new Date(2015, 0, 1); 
> d.toDateString(); 

"Thu Jan 01 2015" 


期 日 》 始 : 


F 
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属性 /方法 相关 说 明 及 示例 
> d.getDay () ; 
4 

getDay () > var d = new Date(2015, 0, 4); 
> d.toDateSstring(); 

9 "Sat Jan 04 2015" 
> d.getDay () ; 
0 

ECMAScripts 对 Date 的 补充 
表 C-15 
属性 /方法 相关 说 明 
获得 当前 时 间 戳 的 快捷 方法 ; 
Date .now () 
> Date.now() === new Date () .getTime (); 


true 


toString () 方 法 的 一 种 变种 : 
> var d = new Date(2015, 0, 1); 
> d.tostring(); 


Eo DOLE: "Thu Jan 01 2015 00:00:00 GMT-0800 (PST)" 


toISOString () > d.toUTCString (); 


"Thu, 01 Jan 2015 08:00:00 GMT" 


> d.toISOString(); 
"2015-01-01T00:00:00.0002Z" 


本 


回 值 与 toISOString () 一 样 。 该 函数 被 JSON . stringify() 
Date .Prototype . 调用 ( 见 本 篇 附录 末 ) 


toJSON () > var d = new Date(); 
> d.toJSON() === d.toISOString(); 
true 


Math 


Math 对 象 的 情况 与 其 他 内 建 对 象 稍 许 有 些 不 同 ， 因 为 它 不 能 被 用 做 构造 器 来 创建 对 


~ 


340 JavaScript 面向 对 象 编 程 指南 (第 2 版 ) 


象 。 实 际 上 ， 它 只 不 过 是 一 组 相关 函数 和 常量 的 集合 而 已 。 下 面 我 们 通过 一 些 具体 的 实例 
来 看 看 究竟 有 哪些 不 同 : 


> typeof Date.prototype; 
"object" 


> typeof Math.prototype; 
"undefined" 


> typeof String; 


"function" 


> typeof Math; 


"object" 
DA | 
Math 对 象 的 成 员 
表 C-16 
属性 /方法 相关 说 明 
这 里 列 出 的 都 是 一 些 常用 的 数学 常量 ， 都 是 只 读 的 。 下 面 是 它们 各 自 的 值 : 

> ath.E; 
2.718281828459045 
> Math.LN10; 
2.302585092994046 

ath.E 

ath.LN10 > Math.LN2; 
0.6931471805599453 

ath .LN2 

ath .LOCGC2E > Math.LOG2E; 
1.4426950408889634 

ath .LOG1OE 

at BT > Math.LOG1OE; 
0.4342944819032518 

ath.SORT1 2 

ath .SORT2 > Math,PI; 
3.141592653589793 
> Math.SQRT1 2; 
0.7071067811865476 
> Math.SORT2; 
1.4142135623730951 
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续 表 
属性 /方法 相关 说 明 
ath.acos (x) 
ath.asin (x) 
ath.atan (x) 
ath.atan2 (y, x) 这 是 对 象 中 的 三 角 函 数 集合 
ath.cos (x) 
ath.sin (x) 
ath.tan (x) 
round() 方法 用 于 返回 最 接近 本 值 的 整数 ， 而 ceil() 用 于 向 上 取 整 ， 
floor() 则 用 于 向 下 取 整 
Math round (x) ath.rounad(5.5)， 
Math .floor (X) 
Mihi ee rt) ath.floor(5.5); 
> Math.ceil(5.1); 
6 
max() 和 min() 这 两 个 方法 分 别 用 于 返回 其 参数 中 的 最 大 值 和 最 小 值 。 
Math.max (numl, 但 如 果 参 数列 表 中 有 一 个 值 为 NaN， 那 么 两 个 方法 都 返回 NaN 
num2, num3, ...) > Math.max(4.5 101, Matnh.PI) 
Math .min (numl, 101 
Num2y. num3y wae) i 
> Math.min(4.5, 101, Matn.PI); 
3.141592653589793 
该 方法 用 于 返回 参数 的 绝对 值 
> Math.abs(-101); 
Math .abs (x) 101 
> Math.abs (101); 
101 
指数 函数 : 返回 e (Math.E) 的 x 次 方 
Mat hexp:(2) > Math.exp(1) === Math.E; 
true 
取 x 的 自然 对 数 
Math.1og (x) > Math.log(10) === Math.LN10; 


true 
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属性 /方法 相关 说 明 


取 x 的 平方 根 


ath.sqrt (9) ; 


Math.sqrt (x) 


> Math.sqrt (2) === Math.SQRT2 
true 
取 x 的 y 次 方 
Math.pow (x, y) > Math.pow(3, 2); 
9 


该 方法 用 于 返回 0 到 1 之 间 的 随机 数 〈 包 括 0) 
> Math.random () ， 
0.8279076443185321 


如 果 我 们 想得到 10 至 100 之 间 的 随机 整数 ， 可 使 用 如 下 方式 
> Math.round (Math.random() * 90 + 10) 
79 


Math.random() 


RegExp 


RegExp () 是 一 个 用 于 创建 正则 表达 式 对 象 的 构造 器 ， 其 第 一 个 参数 是 正则 表达 式 的 


三 


配 模式 ， 第 二 个 参数 则 是 该 匹配 模式 的 修饰 符 。 


> var re = new RegExp('[dn]jotdle', ‘'gmi'); 


该 对 象 的 模式 可 以 匹配 “noodle”、“doodle”“doooodle” 等 。 当 然 ， 我 们 也 可 以 用 
则 表达 式 标识 法 来 创建 同样 的 对 象 : 


> var re = ('/[Idnlotdle/gmi'); // recommended 


关于 正则 表达 式 的 更 详细 信息 ， 读 者 可 以 参考 盆 4 草 : 大 条 和 惟有 刀 :， 正大 丧 丰 区 中 


的 相关 内 容 。 
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RegExp 对 象 的 成 员 


表 C-17 
属性 /方法 相关 说 明 
global 只 读 属 性 ， 当 且 仅 当 regexp 对 象 被 设置 了 g 修饰 符 时 为 true 
ignoreCase 只 读 属性 ， 当 且 仅 当 regexp 对 象 被 设置 了 i 修饰 符 时 为 true 
multiline 只 读 属 性 ， 当 且 仅 当 regexp 对 象 被 设置 了 m 修饰 符 时 为 true 
返回 字符 串 中 下 一 个 匹配 串 的 开始 位 置 。 当 然 ， 该 方法 也 只 有 在 test () 和 
exec () 成 功 匹 配 之 后 ， 且 当 g (global) 修饰 符 被 设 定时 才 有 效 
> var re = /[dnl]jotdle/g; 
> re.lastIndex; 
0 
> re.exec ("noodle doodle"™); 
["noodle"] 
> re.lastIndex; 
lastIndex 6 
> re.exec ("noodle doodle"™); 
["doodle"] 
> re.lastIindex; 
13 
> re.exec ("noodle doodle"™); 
null 
> re.lastIndex; 
0 
只 读 属性 ， 返 回 的 是 该 正则 表达 式 的 模式 (不 包含 修饰 符 ) 
source > var re = /I[ndljotdle/gmi; 


> re.source; 
"[nd]otdle" 


exec (string) 


该 方法 会 对 其 输入 字符 串 进行 正则 匹配 ， 一 旦 匹配 成 功 ， 就 以 数组 的 形式 


返回 所 有 的 匹配 串 或 匹配 分 组 。 并 且 ， 当 对 象 被 设置 有 g 修饰 符 时 


法 会 


> 该 方 


如 果 匹 配 不 成 功 ， 该 方法 就 返回 nul1 


自动 确定 第 一 个 匹配 串 ， 并 对 lastIndex 属性 进行 相关 的 设 


。 但 
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属性 /方法 相关 说 明 
> var re = /([dn]) (ot+)dle/g; 
> re.exec ("noodle doodle"); 


["noodle" "mn i "oo"] 


exec (string) > re.exec ("noodle doodle"); 
[ "doodle" he 7 mm Ooo" ] 


exec () 所 返回 的 数组 有 两 个 附加 属性 : ingex〔 匹 配 处 的 下 标 〉 以 
及 input (所 搜索 的 源 字 符 串 ) 
该 方法 的 功能 与 exec () 相同 ， 只 不 过 它 只 


> /noo/.test('Noodle'); 
test (string) false 


回 true 或 false 


四 


> /noo/i.test('Noodle'); 
true 


Error 对 象 


通常 情况 下 ，Error 对 象 是 由 程序 的 运行 环境 (如 浏览 器 ) 或 其 代码 本 身 来 负责 创 
建 的 。 


> var e = new Error (']jaavcsritpb is not how you spell it"'); 
> typeof e; 
"object" 


除了 Error () 构造 器 本 身 ，Error 对 象 还 要 另外 留 出 派生 对 象 ， 它 们 分 别 是 : 


全 EvalError 


@ RangeError 

S ReferenceError 
人 SyntaxError 

4 TypeError 

4 


URIError 
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Error.prototype 的 成 员 
表 C-18 
属 性 名 相关 说 明 
该 属性 返回 的 是 创建 当前 错误 对 象 的 构造 器 的 名 称 
name > Var e = new EvalError('Oops'); 
> e.name; 
"EvalError" 
该 属性 返回 的 是 当前 错误 对 象 中 的 具体 信息 : 
message > var e = new Error('Oops... again'); 
> e.message 
"Oops... again" 
JSON 对 象 
JSON 对 象 是 ES5 的 新 对 象 。 它 并 非 构 造 器 (这 点 与 Math 对 象 很 像 )， 并 且 它 仅 有 两 


个 方法 : parse () 及 stringify()。 对 于 不 原生 支持 JSON 对 象 的 ES3 浏览 器 而 言 ， 我 


们 可 以 使 用 外 部 代码 来 使 其 达到 同样 效果 ， 详 见 http://json.org。 


JSON 是 JavaScript Object Notation 〈JavaScript 对 象 标记 法 ) 的 简称 。 它 是 一 个 轻 量 乡 


党 


的 数据 交换 格式 。JSON 数据 是 JavaScript 的 子 集 ， 仅 支持 基本 数据 类 型 ， 对 象 以 及 数组 字 


面 量 。 


JSON 对 象 的 成 员 
表 C-19 
方法 相关 说 明 


获得 JSON 格式 的 字符 串 ， 返 回 对 象 : 


Var Oo = JSON.parse (data); 


> 
parse (text, > 
> o.hello; 
1 


callback) 


var data ee {ellov Ls- mE Tl- 27 .31} Ys 
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续 表 
方法 相关 说 明 
可 选项 callback 提供 查看 与 修改 返回 值 的 能 力 。 它 会 获得 key 和 value 对 作为 参 
数 ， 可 以 修改 value， 或 删除 value (返回 undefined 即 可 ): 


parse (text, 


> function callback (key, value) { 
console.log (key, value); 
if (key === 'hello') { 
return 'bonjour'; 
} 
if (key === "hi') { 
return undefined; 
} 
return value; 


} 


callback) > var o = JSON.parse (data, callback); 
hello 1 
01 
12 
23 
hi [1, 2, 3] 
Object {hello: "bonjour"} 
> o.hello; 
"bonjour" 
> 
false 
将 任何 形式 的 值 〈 通 常 为 对 象 或 数组 ) 编码 为 JISON 字符 串 
> Var oO = { 
hello: 1, 
oi- 
when: new Date(2015, 0, 1) 
}; 
USON .Stringifty(O)? 
"{"hello":1,"hi":2,"when":"2015-01-01T08:00:00.0002Z"}" 
Stringif se a a gs 
i 你 可 以 通过 第 二 个 参数 设置 一 个 callback 函数 或 者 数组 形式 的 白 名 单 ) 来 修改 
(Varney 返回 值 。 白 名 单数 组 的 键 值 部 分 就 是 你 希望 出 现在 该 集合 中 的 属性 : 
callback, JSON.stringify(o, ['hello', 'hi']); 
"{"hello":1,"hi":2}" 
white) 


而 最 后 一 个 参数 则 可 以 让 我 们 获得 一 个 人 类 可 读 的 版 本 , 您 可 以 通过 它 指定 相关 
白字 符 串 或 空白 符 数量 : 


> JSON.stringifyl(o, null, 4); 
wm 
{ 


"hello": 1, 

"Thi": 2, 

"when": "2015-01-01T08:00:00.0002Z" 
7 


当 我 们 使 用 ( 锚 4 茧 奢 妆 中 所 讨 
行 如 下 匹配 : 


> "some text".match (/me/); 
[ "me wm ] 


附录 D 
正则 表达 式 


论 的 ) 正则 表达 式 时 ， 可 以 对 文本 字符 串 进 


但 问题 真正 的 关键 是 正则 表达 式 的 匹 E 


模式 ， 而 不 是 这 些 字符 串 文 本 。 在 表 D-1 中 , 我 


们 详细 列 出 了 各 种 不 同 模式 的 语法 ， 并 提 
表 D-1 
匹配 模式 


共 了 相关 的 示例 ， 以 供 读 者 参考 。 


相关 说 明 


这 里 匹配 的 是 字符 类 信息 


[abc] 


> "some text".match(/[otx]/9g); 


[Yo VE 由 rt7] 


[a-z] 


这 里 匹配 的 是 某 一 区 间 内 的 字符 类 信息 。 例 如 ，[a-q] 就 相当 于 [abcdq]l ，[a-z] 
就 表示 我 们 要 匹配 的 是 所 有 的 小 写字 母 ， 而 [a-zA-20-9_] 则 表示 [匹配 所 有 字 
母 、 数 字 及 下 划 线 


Text" .matcn(/[a-z]/g) ; 
wm 七 工 ] 


> "Some 


["o", "m", Te "e", Ve 


> "Some 
["Ss" > 


Text" .match (/ [a-zA-2] /9); 


non "mn nen 区 "rT" nen nmXn 2 Tt"] 
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匹配 模式 相关 说 明 
这 里 匹配 的 是 所 有 不 属于 表达 式 限 定 范 围 内 的 字符 
[%abc] > "Some Text".match(/[^a-z]/9g); 
[SS mm Ss Wy i | 
这 里 匹配 的 是 a 或 者 b。 中 间 那 个 紧 杠 是 “或 者 ”的 意思 ， 该 符号 可 以 在 同一 表 
达 式 中 多 次 使 | 
> "Some Text" .match (/t|T/g); 
alb 
| hh nt"] 
> "Some Text".match(/t|T|Some/g); 
["Some" FE WN 有 | 
这 里 匹配 的 是 所 有 后 面 跟着 b 的 a 的 信息 
> "Some Text" .match(/Some (?=Tex) /9g); 
a ( ?=D) null 
> "Some Text" .match (/Some (?= Tex) /9g); 
["Some"] 
这 里 匹配 的 是 所 有 后 面 不 跟着 b 的 a 的 信息 
> "Some Text" .match (/Some (?! Tex)/g); 
a(?1!Db) null 
> "Some Text".match(/Some(?!Tex)/g); 
["Some"] 
反 斜 杠 主要 用 于 帮助 我 们 匹配 一 些 模 式 文本 中 的 特殊 字符 
> "R2-D2".match (/[2-3]/9g); 
\ ["2", m2 
> "R2-D2".match (/[2\-3]/9g); 
[2 a "2"] 
\n 换行 符 
NE 回 车 符 
NE 从 页 符 
NE 横向 制 表 符 
\v 纵向 制 表 符 
这 里 匹配 的 是 空白 符 ， 包 括 上 面 五 个 转 义 字符 
\s 


> "R2\n D2".match (/\s/g); 


[ "\n" 2 mr 


"] 
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续 表 
匹配 模式 相关 说 明 


这 里 正好 与 上 面相 反 ， 匹 配 的 是 除 空白 符 以 外 的 所 有 内 容 ， 就 相当 于 [^\s] 
> "R2\n D2".match (/\S/g); 
["R", 2 DD, 27] 


\S 


这 里 匹配 的 是 所 有 的 字母 、 数 字 或 下 划 线 ， 相 当 于 [A-Za-z0-9_] 
> "Some textl!".match(/\w/9g); 
[YS ed "m", men dh me 人 a "tt] 


这 里 匹配 的 正好 与 \w 相反 


> "Some text!".match (/\W/g) 
[" 7 | 


\W 


这 里 匹配 的 是 所 有 的 数字 类 信息 ， 相 当 于 [0-9] 


> "R2-D2 and C-3PO".match(/\d/g); 
[2 2 37j] 


Nd 


这 里 正好 与 \d 相反 ， 匹 配 的 是 非 数 字 类 信息 ， 相 当 于 [^0-9] 或 [^\dj] 
\D > "R2-D2 and C-3PO".match (/\D/g); 

["R" 人 Wo 5 Een wm mm 5 Na > Wk 0 ba 7 A 7 wm wm 
人 et 和 ER "O"] 


这 里 匹配 的 是 一 个 单词 的 边界 ， 例 如 空格 或 标点 符号 
F 面 匹配 的 是 后 面 跟着 2 的 R 或 DD: 
> "R2D2 and C-3PO" .match(/[RD]27/g 
["R2", "D2"] 
如 果 在 上 面 的 模式 中 加 入 该 匹配 符 ， 匹 配 的 就 只 有 单词 末尾 的 那 一 个 了 : 
> "R2D2 and C-3PO".match(/ [RD]2\b/g); 
["D2"] 
同样 的 ， 如 果 我 们 在 其 中 输入 一 个 破 折 号 ， 也 可 以 被 当做 一 个 单词 的 末尾 
> "R2-D2 and C-3PO" .match(/ [RD]2\b/9g); 
["R2", "D2"] 


~ 


这 里 的 匹配 操作 与 \b 正好 相反 


> "R2-D2 and C-3PO" .match (/ [RD] 2\B/9g); 
\B null 


> "R2D2 and C-3PO".match(/[RD]2\B/9g); 
["R2"] 


[\b] 这 里 匹配 的 是 退 格 键 符 (Backspace) 


\0 这 里 匹配 的 是 null 值 
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匹配 模式 相关 说 明 
这 里 匹配 的 是 一 个 Unicode 字符 ， 并 且 是 以 一 个 四 位 的 十 六 进 制 数 来 表示 的 
\u0000 >"cTogH".match(/\u0441\u0442\u043E/) 
[ wm Cmo mm ] 
这 里 匹配 的 是 一 个 字符 ， 该 字符 的 编码 是 以 一 个 两 位 的 十 六 进 制 数 来 表示 的 
> "\x64/"; 
\x00 "d" 
> "dude".match(/\x64/9g); 
["d" > "qd"] 


这 里 匹配 的 是 字符 串 开 头 部 分 。 另 外 ， 如 果 我 们 对 该 模式 设置 了 m 修饰 符 (多 
行 )， 那 么 它 匹配 的 是 每 一 行 的 开头 
>"regular\nregular\nexpression".match(/r/g); 
[EE We Wy i Wr "nr"] 


>"regular\nregular\nexpression".match (/^r/g); 
["r" 


>"regular\nregular\nexpression".match (/^r/mg); 
[Yr 区 


这 里 匹配 的 是 输入 消息 的 末尾 部 分 。 另 外 ， 如 果 我 们 对 该 模式 设置 了 多 行 修饰 
符 ， 那 么 它 死 配 的 是 每 一 行 的 末尾 
>"regular\nregular\nexpression".match (/zS/d) ， 
null 


>"regular\nregular\nexpression".match (/r$/mg); 
[TE Tr"] 


这 里 匹配 的 是 除了 新 行 符 或 换行 符 以 外 的 任何 字符 
> "regular".match(/r./g); 
[ "re" ] 


> "regular".match (/r.../9g); 


[ wm regu" ] 
这 里 匹配 的 是 模式 中 间 出 现 0 次 或 多 次 的 内 容 。 例如 , /可 以 匹配 任何 内 容 (包括 空 串 ) 
Se Th mateh (ts 


[可 


> "anything".match(/.*/) 
["anything"] 


> "anything".match(/n.*h/); 
[ wm nyth" ] 


需要 注意 的 是 ， 该 模式 匹配 采用 的 是 “贪心 策略 ”这 意味 着 它 会 尽 可 能 多 地 匹 
配 一 些 可 能 性 


续 表 
匹配 模式 相关 说 明 
这 里 匹配 的 是 模式 中 间 出 现 0 次 或 1 次 的 内 容 
? > "anything".match(/ny?/9g); 
["ny" "n"] 
这 里 匹配 的 是 模式 中 间 出 现 至 少 1 次 (或 多 次 ) 的 内 容 
> "anything".match(/ny+/9g); 
["ny"] 
+ > "R2-D2 and C-3PO".match(/[a-z]/9gi); 
["R", i BAA Tay i 2 Wo a A . 0 "oO"] 
> "R2-D2 and C-3PO".match(/[a-z]+/9gi); 
["R" yr "and" > a "PO"] 
这 里 匹配 的 是 模式 中 间 出 现 过 n 次 的 内 容 ， 
> "regular expression".match(/s/g); 
[vs Rs] 
{n} > "regular expression".match(/s{2}/9g); 
["ss"] 
> "regular expression".match(/\b\w{3}/9g); 
[ mm reg" wm exp" ] 
这 里 匹配 的 是 在 模式 中 出 现 次 数 在 min 到 max 之 间 的 信息 。 如 果 我 们 省 略 了 max， 
就 意味 着 没有 最 多 次 数 ， 只 有 最 少 次 数 。 但 min 是 不 能 省 略 的 。 
例如 ， 如 果 我 们 在 输入 “doodle” 这 个 词 时 输入 了 10 个 “0o”; 
> "qdqoooooooooodqle" .match (/o/g) ， 
["o", Vo WoO Vo "ToS WO WO ko vo, "o"] 
{min,max} > "dooooooooo0oo0odle".match(/o/glength); 
["oo", "oo", "Ooo", "oo" ， "oo"] 
10 
>"dqoooooooooodqle'" .match(/o{2，} /gl) ， 
[ "ooy" "oo "oo "oo "oo"] 
>"dqoooooooooodqle" .match (/o{12，6}/g) ， 
[ "oooooo" ， "oooo""] 
当 某 个 匹配 模式 被 放 在 括号 内 时 ， 就 表明 匹配 该 模式 的 匹配 串 是 可 替换 的 ， 因 此 
它 也 被 称 为 捕获 模式 
(pattern) AN 
这 些 被 捕获 的 匹配 串 可 以 分 别 用 $1、$2…$9 等 参数 来 表示 
例如 ， 我 们 可 以 将 匹配 串 中 所 有 的 “r” 都 重复 一 次 ; 


352 JavaScript 面向 对 象 编 程 指南 (第 2 版 ) 
续 表 


匹配 模式 相关 说 明 


> "regular expression".replace(/(r)/g, '$1$1'); 
"rregularr exprression" 

(pattern) 或 我 们 将 所 有 匹配 “re” 的 内 容 都 替换 成 “er”: 

> "regular expression".replace (/(r) (e)/g, '$2$1'); 


"ergular experssion" 


这 不 是 捕获 模式 ， 也 就 是 说 这 里 不 能 用 $1、$2 等 参数 来 记录 匹配 串 
例如 在 下 面 的 示例 中 ， 当 我 们 对 “re” 进行 匹配 时 ，$1 记 住 的 不 是 “r”， 而 是 
人 第 二 个 模式 所 匹配 的 结果 e: 


> "regular expression".replace (/(?:r) (e)/g, '$1$1'); 


习 
ZI 
EC 


"eegular expeession" 


有 时 候 ， 模 式 中 的 某 些 特殊 字符 所 代表 的 意义 往往 不 止 一 种 ， 例 如 和 ^、?、\b 等 ， 因 
此 在 我 们 使 用 时 有 必要 对 此 稍 加 留意 。 


如 今 ， 招 聘 Web 开 发 者 的 职位 要 求 中 ， 具 备 JavaScript 的 知识 已 经 是 决定 性 的 因素 了 。 过 去 ， 我 们 只 是 偶尔 在 网 
页 中 简单 地 罕 入 几 行 JavaScript 代 码 ， 而 现在 已 经 拥有 了 各 种 程序 库 及 扩展 性 应 用 构架 ， 以 用 于 各 种 “ 胖 客 户 端 ”以 
及 AJAX 类 型 的 网 络 应 用 程序 。 

本 书 将 着 重 于 介绍 JavaScript 在 面向 对 象 方面 的 特性 ， 以 展示 如 何 构建 健壮 的 、 可 维护 的 、 功 能 强大 的 应 用 程序 
及 程序 库 。 阅 读 完 本 书 ， 您 将 会 在 面试 有 关 JavaScript 的 职位 时 显得 游 思 有余 ， 甚 至 会 凭借 某 些 连 面试 官 都 不 知道 的 
知识 给 他 们 留 下 深刻 的 印象 。 

如 果 您 想 将 自己 的 JavaScript 提 升 到 一 个 新 的 水 平 ， 这 本 书 
将 是 不 错 的 选择 。 


: JavaScript 作为 一 种 浏览 器 语言 的 核心 思想 ; 

* 如 何 设置 并 使 用 开发 环境 ( Firebug ) ; 

深入 讨论 数据 类 型 、 操 作 符 以 及 流程 控制 语句 ; 

: 深入 讨论 函数 、 函 数 应 用 模式 、 变 量 作用 域 等 概念 ; 
: 理解 原型 是 如 何 工 作 的 ; 

使 用 通用 模式 实现 继承 ， 以 便 代码 复 用 ; 

: 保持 程序 整洁 、 快 速 并 且 与 其 他 的 程序 和 库 兼 容 ; 

. 使 用 JavaScript 的 OO 特性 来 提高 脚本 性 能 ; 

“用 JavaScript 实 现 高 级 面向 对 象 特性 。 


是 Facebook 工 程 师 、 技 术 作家 兼 讲 师 。 他 
常 在 其 博客 ( www.phpied.com ) 与 一 些 相关 会 议 中 就 Web 开 
发 话题 发 表 独 到 见解 。 另 外 ， 他 还 运营 着 一 些 网 站 ， 其 中 包括 
JSPatterns.com 这 个 用 于 探讨 JavaScript 模 式 的 网 站 。 
具有 多 年 丰富 的 JavaScript 开 发 经 
验 ， 目 前 他 正在 Yahool Search 从 事前 端 工程 师 的 工作 。 
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